vue 使用原生组件上传图片的实例

需求描述：需要将后台返回的图片路径赋值到img的 src

1 一个页面上传一张图片

当一个页面只有一个位置需要上传图片，很简单，直接绑定上传按钮

html页面

js代码：封装上传图片的方法

 uploadPic(e) {
  var _self = this;
  var inputFile = e.target;
  if (!inputFile.files || inputFile.files.length <= 0) {
   return;
  }
  var file = inputFile.files[0];
  var formData = new FormData();
  formData.append('file', file);
  formData.append('SaveDir', 'Map/MapItem');
  formData.append("FileName", $.whiskey.tools.dateFormat(new Date(), "HHmmssffff"));
  $.ajax({
   url: "/Upload/UploadPic",//后台上传图片的方法
   type: 'POST',
   dateType: 'json',
   cache: false,
   data: formData,
   processData: false,
   contentType: false,
   success: function (res) {
    if (res.ResultType == 3) {
     var filePath = res.Data.file;//后台返回的图片路径
     _self.mapItem.MapIcon = filePath;//将路径赋值到声明的变量中
    }
   }
  });
},

2 一个页面上传多张图片

当一个页面有多个位置需要上传图片，如果按照上面方法，得需要绑定多个上传函数，所以我把重复的部分封装出来,用到了promise函数

html页面

js代码：封装上传图片的方法

 uploadPic(e) {
  var _self = this;
  var inputfile = e.target;
  _self.uploadImg(inputfile).then(data => {
   _self.mapItem.MapIcon = data;//data为取到的图片路径
  })
},
//封装函数
 uploadImg(inputFile) {
  var _self = this;
  if (!inputFile.files || inputFile.files.length <= 0) {
   return;
  } 
  return new Promise((suc,err)=>{
   var file = inputFile.files[0];
   var filepath = "";
   var formData = new FormData();
   formData.append('file', file);
   formData.append('SaveDir', 'Map/MapSite');
   formData.append("FileName", $.whiskey.tools.dateFormat(new Date(), "HHmmssffff"));
   $.ajax({
    url: "/Upload/UploadPic",
    type: 'POST',
    dateType: 'json',
    cache: false,
    data: formData,
    processData: false,
    async:false,
    contentType: false,
    success: function (res) {
     if (res.ResultType == 3) {
      filepath = res.Data.file;
      suc(filepath);
     }
    }
   });
  })
 },
},

补充知识：vue 利用原生input上传图片并预览并删除

看代码~

js部分

以上这篇vue 使用原生组件上传图片的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。