vue、微信小程序上传文件(base64格式、一般格式)及vue的表格导入和导出

一、上传文件

1.vue项目
base64格式

onInputChange(el) {
      var self = this;
      let file=el.file;
      let type=file.type.split('/')[0];
      if(type === 'image') {
        //将图片转化为base64
        var reader = new FileReader();
        reader.readAsDataURL(file); // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径,
        reader.onload = function () {
            var image = reader.result;  // image即base64格式，后面调用后端请求传入image
            let imageList=[];
            imageList.push(image);
            let imgData={base64List:imageList}
            upImg(imgData).then(res=>{
              if(res.data.code===200){
                let nowUrl=res.data.data.url;
                self.newFiles.push(nowUrl);
                self.filelist.push({
                  name: nowUrl,
                  url: nowUrl,
                });
                self.$forceUpdate();
                self.$message.success(res.data.message)
              }else{
                self.$message.error(res.data.message)
              }
            })
        }
      }else{
        self.filelist=[];
        self.newFiles=[];
        self.$message.warning('请正确上传图片！');
      }
    },

接口

//工位管理上传图片
export function upImg(formData) {
  let newData=JSON.stringify(formData);
  return request({
    url: '/platform/leaseArea/upImg',
    method: 'post',
    headers:{'Content-Type':'application/json'},
    data:newData
  })
}

一般格式

    onInputChange(el) {
      var self = this;
      let file=el.file;
      let data=new FormData();
      data.append('file',el.file);
      let type=file.type.split('/')[0];
      if(type === 'image') {
        //将图片转化为base64
        upImg(data).then(res=>{
          if(res.data.code===200){
            let nowUrl=res.data.data.url;
            self.newFiles.push(nowUrl);
            self.filelist.push({
              name: nowUrl,
              url: nowUrl,
            });
            self.$forceUpdate();
            self.$message.success(res.data.message)
          }else{
            self.$message.error(res.data.message)
          }
        })
      }else{
        self.filelist=[];
        self.newFiles=[];
        self.$message.warning('请正确上传图片！');
      }
    },

接口

export function upImg(formData) {
  return request({
    url: '/platform/leaseArea/upImg',
    method: 'post',
    responseType:'blob',
    headers: {'Content-Type': 'multipart/form-data'},
    data:formData
  })
}

2.微信小程序
base64格式

  //上传图片
  //定义一个点击事件
  changePhotoe() {
    var _this = this;
    wx.chooseMedia({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        console.log(res);
        // tempFilePath可以作为img标签的src属性显示图片
        wx.showLoading({
          title: '正在上传',
        });
        _this.setData({
          filelist: res.tempFiles[0].tempFilePath,
          isUpload: true,
        })
        wx.getFileSystemManager().readFile({
          filePath: res.tempFiles[0].tempFilePath,
          encoding: "base64",
          success: function (res) {
            _this.data.baseImg.push('data:image/png;base64,' + res.data);
            //转换完毕，执行上传
            wx.request({
              url: app.serverUrl + '/wechat/svcVisitor/upImg',
              header: {
                "token": _this.data.token
              },
              data: {
                base64List: _this.data.baseImg
              },
              method: 'POST',
              success: function (res) {
                console.log(res);
                if (res.data.code == 200) {
                  _this.setData({
                    headUrl: res.data.data.url
                  })
                  wx.showToast({
                    title: res.data.message,
                    icon: 'none'
                  })
                  wx.hideLoading()
                }
              }
            })
          }
        })
      }
    })
  },

一般格式

changePhotoe() {
    var _this = this;
    wx.chooseMedia({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        wx.showLoading({
          title: '正在上传',
        });
        _this.setData({
          isUpload: true,
        })
        wx.uploadFile({
          url: app.serverUrl + '/wechat/svcVisitor/upImg', //
          filePath: res.tempFiles[0].tempFilePath,
          name: 'file',
          method: 'POST',
          header: {
            'content-type': 'multipart/form-data',
            "token": _this.data.token
          },
          success(res) {
            let data = JSON.parse(res.data);
            if (data.code == 200) {
              _this.setData({
                headUrl: data.data.url
              })
              wx.showToast({
                title: data.message,
                icon: 'none'
              })
              wx.hideLoading()
            } else {
              wx.showToast({
                title: data.message,
                icon: 'none'
              })
              wx.hideLoading()
            }
          },
        });
      }
    })
  },

导出

exoportExcel(){
      let searchData=this.searchData;
      exportExcel(searchData).then(res=>{
        const link = document.createElement('a')
        const blob = new Blob([res.data], {
          type: 'application/vnd.ms-excel'
        })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.click()
      })
    },

导出接口

export function exportExcel(formData) {
  let newData=JSON.stringify(formData);
  return request({
    url: '/platform/accessCard/exportExcel',
    method: 'post',
    responseType:'blob',
    headers:{'Content-Type':'application/json'},
    data:newData
  })
}

导入

<el-upload id="upfile_loading" ref="upload" action="" style="display:inline-block;margin-top:10px;" :multiple="true"  :http-request="importBtn" accept=".xls, .xlsx" >
  <el-button type="primary" style="margin-left:10px;background-color:#8381FF;border-color:#8381FF;">批量导入</el-button>
</el-upload>

importBtn(el){
      var self = this;
      let data=new FormData();
      data.append('file',el.file);
      importExcel(data).then(res=>{
        if(res.status==200){
          self.getList();
          self.getListTotal();
        }
      })
    },

导入接口

export function importExcel(formData) {
  return request({
    url: '/platform/accessCard/importExcel',
    method: 'post',
    responseType:'blob',
    headers: {'Content-Type': 'multipart/form-data'},
    data:formData
  })
}