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

最新推荐文章于 2025-08-05 17:26:27 发布

原创最新推荐文章于 2025-08-05 17:26:27 发布 · 3.1k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue #前端

文章讲述了如何使用Avueupload上传组件在uploadAfter方法中添加文件名后缀，并在uploadPreview方法中处理文件预览，以实现下载或打开图片的功能。同时，代码示例展示了如何在上传过程中处理文件大小限制和删除操作。

该文章已生成可运行项目，

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);
                },
              },
            ],
          },