【Avue upload上传组件回显文件名,并下载或打开图片】

Avue upload上传组件回显文件名,并下载或打开图片


重点就是在uploadAfter方法中添加文件名后缀,和uploadPreview方法中去掉后缀

          // 新增附件上传
          tempfileList:[],
          {
    
    
            label: "",
            prop: "",
            span: 24,
            arrow: false,
            collapse: true,
            display: true,
            column: [
              {
    
    
                label: "附件",
                prop: "attachment",
                span: 24,
                type: "upload",
                labelWidth: 80,
                display: true,
                loadText: "附件上传中,请稍等",
                dataType: "string",
                multiple: true,
                showFileList: true,
                tip: "文件大小不超过20Mb",
                props: {
    
    
                  value: "url", //看文档有解释
                  label: "url", //看文档有解释
                },
                propsHttp: {
    
    
                  res: "data",
                  url: "filePath",
                  name: "fileName",
                  home: upload.home,
                },
                action: upload.action,
                data: {
    
    
                  fileType: 1,
                },
                uploadPreview: (file, column, done) => {
    
    
                   //重点***
                  const lastIndex = file.url.lastIndexOf("/");
                  const url = file.url.slice(0, lastIndex);
                  window.open(url, "_blank");
                  return;
                },
                uploadBefore: (file, done, loading) => {
    
    
                  this.currentFileName = file.name;
                  let newFile = new File([file], file.name, {
    
    
                    type: file.type,
                  });
                  if (newFile.size > 20971520) {
    
    
                    this.$message.warning("文件大小不超过20Mb");
                    loading();
                    return;
                  }
                  done(newFile);
                },
                uploadAfter: (file, done) => {
    
    
                  this.tempfileList.push({
    
     attachment: file.filePath });
                  //重点***
                  file.filePath = file.filePath + "/" + file.fileName;
                  done();
                },
                uploadDelete: (file) => {
    
    
                  this.tempfileList.splice(Number(file.uid), 1);
                },
              },
            ],
          },

如果小伙伴有更好的解决办法,欢迎补充~

猜你喜欢

转载自blog.csdn.net/different9102/article/details/131768818