一.基本思路

1.相册（相机插件）取到图片地址拿到图片本地路径（pictureUrl）----->用于页面展示
2.通过图片本地路径将图片转化为base64格式---->用于上传
3.通过formdata格式上传图片

二.详细步骤

1,获取图片（以海马汇桥接为例）

拍照

takePhoto () {
      let vm = this

      var options = {
        'allowEdit': true, // 拍完照后是否允许编辑
        'editShape': 1, // 当allowEdit为true时，希望获取到的形状0圆形，1矩形, 2正方形
      }
      var param = {
        className: 'CameraBridge',
        function: 'takePicture',
        params: options,
        successCallBack: 'onSuccess',
        failCallBack: 'onError',
      }
      HandBridge.postMessage(JSON.stringify(param))
      // 成功回调
      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)
      }
      // 失败回调
      window.onError = function (message) {
        // vm.showImgPreview = false
        vm.showActionSheet = false
        alert(message)
      }
    },

相册选择

selectPhotoFormAlbum () {
      let vm = this
      // 调用方式
      // var options = {
      //   maxImages: 1, // 仅对Android有效，如果不传该参数调用的是图片单选插件返回的为图片地址的字符串，如果参数值为大于等于1的整数则调用图片多选插件，返回数组
      // }
      var argument = {
        className: 'CameraBridge',
        function: 'getPicture',
        // params: options,
        successCallBack: 'onSuccess',
        failCallBack: 'onError',
      }
      HandBridge.postMessage(JSON.stringify(argument))
      // 成功回调
      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)
      }
      // 失败回调
      window.onError = function (error) {
        vm.showActionSheet = false
        alert('Error: ' + error)
      }
    },

2.图片转base64格式

image2Base64 (img) {
      let vm = this
      // 成功回调
      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)
      }
      // 失败回调
      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))
    },
//添加用于上传的图片数组
addFile (file, pictureId, imageName) {
      let img = {
        pictureId: pictureId,
        file: file,
        // imageName: imageName,
      }
      this.imageTemArr.push(img)
      // this.uploadImages()
    },

3.图片上传

页面父组件调用

// 上传
    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)
        })
      })
    },

以上代码可以看到我们在父组件中调用图片组件的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')
        }
      })
    },

在子组件中我们调用了公共服务imageService中的uploadImage方法真正实现上传

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)
  },

这样就完整的实现了图片上传的功能