Vue upload 文件上传 , 预览(打开新窗口预览图片)

上传: 这里以Ant Design of Vue 为例

 
     上传 
 
//图片预览弹框

      

// fileList:[]    上传的文件

// action="#"     上传地址

// accept='.jpg'  上传类型

// custom-request 自定义上传方法

// @preview: 文件预览

// showUploadList: 是否显示上传后列表

// Headers: { 'content-type': 'multipart/form-data' } 设置上传的请求头部 

  // 上传
    async handleUp(file) {
      const fileData = new FormData();
      fileData.append('file', file.file);
      const res = await this.$axios.post('/sys-storage/upload', fileData, {
        Headers: { 'content-type': 'multipart/form-data' },
      });
     
      if (!res.status) file.onError();
      file.onSuccess();
      const files = res.data;  //upload 上传成功后的数据
      let params = {   // 接口参数 
        token: files.fileToken,
        pId: '',
        name: files.fileName, 
      };
      this.$axios.post(params).then(res => {
        // 调用后端上传接口存储信息
        if (res.status) {console.log('上传成功')}
      });
    },

 // 预览
  async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview; // 图片地址赋值
      this.previewVisible = true;    //预览弹框打开
    },

   getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    },

//打开新窗口预览图片
 const imgWindow = window.open('');
 imgWindow && imgWindow.document.write(``);