一.基本思路

1.相冊（相機插件）取到圖片地址拿到圖片本地路徑（pictureUrl）----->用于頁面展示
2.通過圖片本地路徑將圖片轉(zhuǎn)化為base64格式---->用于上傳
3.通過formdata格式上傳圖片

二.詳細步驟

1,獲取圖片（以海馬匯橋接為例）

拍照

takePhoto () {
      let vm = this

      var options = {
        'allowEdit': true, // 拍完照后是否允許編輯
        'editShape': 1, // 當(dāng)allowEdit為true時，希望獲取到的形狀0圓形，1矩形, 2正方形
      }
      var param = {
        className: 'CameraBridge',
        function: 'takePicture',
        params: options,
        successCallBack: 'onSuccess',
        failCallBack: 'onError',
      }
      HandBridge.postMessage(JSON.stringify(param))
      // 成功回調(diào)
      window.onSuccess = function (message) {
        // message：圖片地址
        let img = {
          pictureId: vm.randomUUID(),
          pictureUrl: message, // 照片的地址
          // imageName: vm.getImageName(message),
        }
        // vm.readFile(img)
        // vm.showImgPreview = false
        vm.showActionSheet = false
        vm.image2Base64(img)
      }
      // 失敗回調(diào)
      window.onError = function (message) {
        // vm.showImgPreview = false
        vm.showActionSheet = false
        alert(message)
      }
    },

相冊選擇

selectPhotoFormAlbum () {
      let vm = this
      // 調(diào)用方式
      // var options = {
      //   maxImages: 1, // 僅對Android有效，如果不傳該參數(shù)調(diào)用的是圖片單選插件返回的為圖片地址的字符串腔长，如果參數(shù)值為大于等于1的整數(shù)則調(diào)用圖片多選插件鸟召，返回數(shù)組
      // }
      var argument = {
        className: 'CameraBridge',
        function: 'getPicture',
        // params: options,
        successCallBack: 'onSuccess',
        failCallBack: 'onError',
      }
      HandBridge.postMessage(JSON.stringify(argument))
      // 成功回調(diào)
      window.onSuccess = function (results) {
        // alert('成功' + results)
        let img = {
          pictureId: vm.randomUUID(),
          pictureUrl: results, // 照片的地址
          // imageName: vm.getImageName(results),
        }
        // vm.readFile(img)
        vm.showActionSheet = false
        vm.image2Base64(img)
      }
      // 失敗回調(diào)
      window.onError = function (error) {
        vm.showActionSheet = false
        alert('Error: ' + error)
      }
    },

2.圖片轉(zhuǎn)base64格式

image2Base64 (img) {
      let vm = this
      // 成功回調(diào)
      window.onSuccess = function (message) {
        // alert(message)
        let image = {
          // thumbnailurl: img.pictureUrl,
          pictureId: img.pictureId,
          pictureUrl: img.pictureUrl, // file_path
          // imageName: img.imageName, // file_name
        }
        let imgUrls = JSON.parse(message)
        vm.imgList.push(image)
        vm.addFile(imgUrls.data, img.pictureId, img.imageName)
      }
      // 失敗回調(diào)
      window.onError = function (message) {
        alert(message)
      }
      var options = {
        'filePath': img.pictureUrl,
        'quality': 50, // 取值范圍0-100  100時圖片不壓縮
      }
      var param = {
        className: 'FileBridge',
        function: 'image2Base64',
        params: options,
        successCallBack: 'onSuccess',
        failCallBack: 'onError',
      }
      HandBridge.postMessage(JSON.stringify(param))
    },
//添加用于上傳的圖片數(shù)組
addFile (file, pictureId, imageName) {
      let img = {
        pictureId: pictureId,
        file: file,
        // imageName: imageName,
      }
      this.imageTemArr.push(img)
      // this.uploadImages()
    },

3.圖片上傳

頁面父組件調(diào)用

// 上傳
    uploadImages () {
      let vm = this
      vm.$hips.indicator.show({
        spinColor: '#1f8ceb',
        pureBackground: true,
      })
      vm.imageTemArr = []
      return new Promise((resolve, reject) => {
        vm.$refs.imageGroup.uploadImage().then(res => {
          console.log(res)
          vm.imgIdList = []
          vm.$hips.indicator.hide({
            spinColor: '#1f8ceb',
            pureBackground: true,
          })
          if (res === 'S') {
            console.log('無圖片上傳')
            resolve('S')
          } else {
            if (res.data.success) {
              res.data.data.forEach(function (item, index) {
                let obj = {}
                obj.pictureId = item.fileId
                obj.pictureUrl = item.fileUrl
                vm.imgIdList.push(obj)
              })
              resolve('S')
            } else {
              vm.$hips.toast({
                message: '圖片上傳失敗',
                position: 'middle',
              })
            }
          }
        }, (err) => {
          console.log(JSON.stringify(err))
        }).catch(error => {
          vm.imgIdList = []
          console.log(JSON.stringify(error))
          reject(error)
        })
      })
    },

以上代碼可以看到我們在父組件中調(diào)用圖片組件的uploadImage方法

子組件uploadImage方法

uploadImage () {
      return new Promise((resolve, reject) => {
        let vm = this
        if (vm.imageTemArr.length) {
          imageService.uploadImage(vm.imageTemArr).then(res => {
            resolve(res)
            // alert('圖片上傳成功：' + res)
          }).catch(error => {
              // this.showPrompt('圖片上傳失敗，請重新點擊上傳!')
            alert('圖片上傳失敗，請重新點擊上傳!')
            console.log('圖片上傳失敗,錯誤信息：' + error)
          })
        } else {
          resolve('S')
        }
      })
    },

在子組件中我們調(diào)用了公共服務(wù)imageService中的uploadImage方法真正實現(xiàn)上傳

imageService中定義的uploadImage方法

 uploadImage (imageTemArr) {
    let imageList = []
    imageTemArr.forEach(function (item, index) {
      imageList.push(item.file)
    })
    let formData = new FormData()
    formData.append('files', imageList) // 圖片base64格式
    let url = `https://*********.com/lightkits-center/v1/${window.localStorage.organizationId}/files/base64Batch`
    return Axios.postFormData(formData, url)
  },

這樣就完整的實現(xiàn)了圖片上傳的功能

移動端圖片上傳實施分享