码迷,mamicode.com
首页 > Web开发 > 详细

Vue图片上传

时间:2021-03-05 13:17:50      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:data   response   conf   art   detail   asc   图片   verify   ret   

 

参考资料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信息,在此基础上请求接口上传

  • base64转file

  • formData

  • multipart/form-data + post

  • withCredentials 跨域请求设置

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 ...

  

 

Vue图片上传

标签:data   response   conf   art   detail   asc   图片   verify   ret   

原文地址:https://www.cnblogs.com/lanse1993/p/14483158.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!