Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
563 views
in Technique[技术] by (71.8m points)

file formData文件类型的如何同时上传多张图片呢

  1. 获取到本地相册的图片, 我只能获取到路径一些信息,因为使用的是apicloud拉起的相册,获取的图片信息
  2. 获得的图片信息我使用canvas转换为formData格式的文件了
  3. 想请问如何一次上传多张图片以文件流的形式传给后台呢?
convertImgToBase64 (url, callback, outputFormat) {
      let that = this
      var canvas = document.createElement('CANVAS')
      var ctx = canvas.getContext('2d')
      var img = new Image;

      img.crossOrigin = 'Anonymous';
      img.onload = function () {

        canvas.height = img.height;
        canvas.width = img.width;
        let quality = 0.5
        ctx.drawImage(img, 0, 0, 400, 400);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png', quality);
        // let resultFile = that.dataURLtoFile(dataURL)
        let resultFile = that.convertBase64UrlToBlob(dataURL) //转换为blob

        that.fileList = []
        that.fileList.push(resultFile)  //转换为file格式的图片

        let formData = new FormData()
        // formData.append('img_url', that.fileList, 'dbImg')
        formData.append('img_url', resultFile, 'dbImg') //如何上传多张图片呢??????????????
        formData.append('team_id', that.picParams.team_id)
        formData.append('name', that.picParams.name)
        formData.append('is_referee', that.picParams.is_referee)
        formData.append('open_info', that.picParams.open_info)
        formData.append('access_token', localStorage.getItem('access_token'))
        formData.append('uid', localStorage.getItem('mid'))

        that.$validator.validateAll('commonInfo').then(res => {  //开始上传

          if (res) {
            // that.functionList.push(that.postImg(that.picParams))
            that.functionList.push(that.postImg(formData))
            async.parallel(that.functionList, (err, result) => {
              if (!err) {
                console.log('success===>', result);
              } else {
                console.log('err===>', err);
              }
            })
          } else {
            that.$toast(that.$validator.errors.items[0].msg)
            return false
          }
        })
        // callback.call(that, dataURL);
        canvas = null;
      }
      img.src = url;
      this.canvasImg = img.src
    },

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

formData.append('img_url1', resultFile, 'dbImg1')
formData.append('img_url2', resultFile, 'dbImg2')
...
formData.append('img_url99', resultFile, 'dbImg99')

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...