ufutx_love_mp/src/components/uploadPic.wpy

<style lang="less">
  page {}

  .upload_file {
    overflow: hidden;
    position: relative;

    ._item {
      padding: 32rpx;
      border-bottom: 1rpx solid #f5f5f5;
    }

    ._cancel {
      border-top: 16rpx solid #f8f8f8;
      margin-bottom: 24rpx;
    }
  }

</style>
<template>
  <view :class="{'~show': chooseShow}" class="~cu-modal ~bottom-modal">
    <view class="~cu-dialog" style="border-radius: 32rpx 32rpx 0 0;">
      <view class="~bg_f upload_file">
        <view class="_title _item ~font_32" catchtap="onCamera">拍摄</view>
        <view class="_title _item ~font_32" catchtap="chooseImageV2">从手机相册选择</view>
        <view class="_title _item ~font_32 ~color333 _cancel" @tap="cancelFn">取消</view>
      </view>
    </view>
  </view>
</template>
<script>
  import wepy from '@wepy/core'
  import {service} from '../config'
  import base from '../mixins/base'
  import https from '../mixins/https'
  import utils from '../utils/util'

  wepy.component({
    props: {
      chooseShow: {
        type: Boolean,
        default: false
      }
    },
    data: {
      uploadData: null,
      uploader: {},
      videos: [],
      uploadFiles: []
    },
    mixins: [https, base],
    methods: {
      chooseImageV2() { // 上传照片
        let vm = this
        vm.$showLoading(`${vm.i18nL.components.uploadPic.Ace5}`)
        vm.cancelFn()
        wx.chooseMedia({
          count: 1, // 上传视频的个数
          mediaType: ['image'], // 限制上传的类型为image
          sourceType: ['album'], // 可以指定来源是相册还是相机
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          success: (res) => { // 获取临时存放的视频资源
            console.log(res.tempFiles)
            console.log(res)
            for (let item of res.tempFiles) {
              console.log(item, '====')
              let type = item.fileType == 'video' ? 'video' : 'img'
              vm.uploadFile(item.tempFilePath, type, item.tempFilePath)
            }
          },
          fail: () => {
            vm.$emit('changeVal', '')
            vm.modalName = ''
            wx.hideLoading()
          }
        })
      },
      onCamera() {
        let vm = this
        vm.cancelFn()
        wx.chooseMedia({
          count: 1,
          mediaType: ['image'], // 限制上传的类型为image
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['camera'], // 可以指定来源是相册还是相机
          success: (res) => { // 获取临时存放的视频资源
            vm.cancelFn()
            for (let item of res.tempFiles) {
              console.log(item, '====')
              let type = item.fileType == 'video' ? 'video' : 'img'
              vm.uploadFile(item.tempFilePath, type, item.tempFilePath)
            }
          },
          fail: () => {
            vm.$emit('changeVal', '')
            vm.modalName = ''
            wx.hideLoading()
          }
        })
      },
      uploadFile(filePaths, type, name) {
        let vm = this
        console.log(filePaths, 'filePaths')
        if (vm.uploadData) {
          vm.$showLoading(`${vm.i18nL.components.uploadPic.Ace6}`)
          let fileName = new Date().getTime() + Math.floor(Math.random() * 150) + '.' + type.split('/').pop().toLowerCase()
          let filePath = vm.uploadData.host + '/' + vm.uploadData.dir + fileName
          wx.uploadFile({
            url: vm.uploadData.host,
            filePath: filePaths,
            name: 'file',
            formData: {
              key: vm.uploadData.dir + fileName,
              policy: vm.uploadData.policy,
              OSSAccessKeyId: vm.uploadData.access_id,
              signature: vm.uploadData.signature
            },
            header: {
              'Authorization': 'Bearer ' + wx.getStorageSync('token'),
              // 'content-type': 'multipart/form-data',
              'X-Requested-With': 'XMLHttpRequest'
            },
            success: (res) => {
              if (res.statusCode === 204) {
                console.log(filePath, '上传成功')
                let dataV2 = {
                  filePath: filePath,
                  type: type,
                  name: name
                }
                wx.hideLoading()
                vm.$emit('changeVal', dataV2)
              }
            },
            fail: (err) => {
              wx.showModal({ // 使用模态框提示用户进行操作
                title: `${vm.i18nL.components.uploadPic.Ace7}：`,
                content: `${vm.i18nL.components.uploadPic.Ace8}` + err,
                showCancel: false,
                confirmText: `${vm.i18nL.components.uploadPic.Ace12}`,
                success: function (res) {
                  if (res.confirm) {
                    vm.$gotoBack(1)
                    vm.$emit('changeVal', '')
                  }
                }
              })
            }
          })
        } else {
          let vm = this
          vm.$showToast(`${vm.i18nL.components.uploadPic.Ace15}`)
          wx.request({
            url: `${service.host}/get/oss/config`,
            header: {
              'Authorization': 'Bearer ' + wx.getStorageSync('token'),
              'X-Requested-With': 'XMLHttpRequest'
            },
            method: 'get',
            data: {},
            success: ({code, data}) => {
              vm.uploadData = data.data
              vm.$app.$options.globalData.uploadData = data.data
            }
          })
          console.log('1111111111')
        }
      },
      cancelFn() {   // 取消方法
        wx.hideLoading()
        this.$emit('closeUploadPic', '')
      },
      getOssConfig() {
        let vm = this
        wx.request({
          url: `${service.host}/get/oss/config`,
          header: {
            'Authorization': 'Bearer ' + wx.getStorageSync('token'),
            'X-Requested-With': 'XMLHttpRequest'
          },
          method: 'get',
          data: {},
          success: ({code, data}) => {
            vm.uploadData = data.data
            vm.$app.$options.globalData.uploadData = data.data
          }
        })
      }
    },
    created() {
      let vm = this
      vm.getOssConfig()
    }
  })
</script>