Vue图片上传

时间:2021-03-05 13:17:50   收藏:0   阅读:0

 

参考资料https://www.cnblogs.com/otis-oc/p/10388650.html

https://blog.csdn.net/danby2/article/details/104529713/?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-3&spm=1001.2101.3001.4242

 

使用的vant插件上传图片,回调返回的是base64信息,在此基础上请求接口上传

function base64ToFile(urlData, fileName) {
  let arr = urlData.split(‘,‘);
  let mime = arr[0].match(/:(.*?);/)[1];
  let bytes = atob(arr[1]); // 解码base64
  let n = bytes.length
  let ia = new Uint8Array(n);
  while (n--) {
    ia[n] = bytes.charCodeAt(n);
  }
  return new File([ia], fileName, { type: mime });
}

// base64转file
let filePath  = base64ToFile(file.content, ‘图片名称‘)

// formdata提交
    let param = new FormData();
    param.append(‘file‘, filePath);
    param.append(‘data‘, pramas.data);
    param.append(‘verify‘, pramas.verify);

// 请求
    axios({
      filePath: filePath,
      method: ‘post‘,
      url: CONFIG.uploadUrl + ‘images/upload‘,
      headers: {
        ‘Content-Type‘: ‘multipart/form-data‘
      },
      responseType: ‘json‘,
      withCredentials: true,
      data: param,
    }).then ...

  

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!