老师，有时间的话可以再实现一个上传图片封面的功能吗

Question

搞了半天也没做出来。。

Answer 1

甲蛙 2021-11-11 09:58:25

我单独在公众号做了一期视频：《SpringBoot+Vue3实现文件上传功能》，源码已提交，拉取最新的源码就能看到了。

Answer 2

qq_齐笨笨_0 2021-06-13 15:01:59

你好，你上传图片封面的功能做出来嘛，想请教一下

• 提问者 gbwmsw #1

  做出来了
  前端代码
        <a-form-item label="封面">
          <a-input v-if="ebook.id"  :readonly="true" v-model:value="ebook.cover"/>
          <a-upload
              :multiple="false"
              :file-list="fileList"
              :before-upload="beforeUpload"
          >
            <a-button>
              <upload-outlined></upload-outlined>
              Upload
            </a-button>
          </a-upload>
        </a-form-item>

• 提问者 gbwmsw #2

  js：
  interface FileItem {
    uid: string;
    name?: string;
    status?: string;
    response?: string;
    url?: string;
    type?: string;
    size: number;
    originFileObj: any;
  }
  
  interface FileInfo {
    file: FileItem;
    fileList: FileItem[];
  }
  setup(){
      /**
       * 文件上传
       */
      const fileList = ref<FileItem[]>([]);
      const beforeUpload = (file: FileItem) => {
        fileList.value=[];
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          message.error('You can only upload JPG or PNG  file!');
          return false;
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('Image must smaller than 2MB!');
          return false;
        }
        fileList.value = [...fileList.value, file];
        console.log("fileList====="+fileList.value)
        console.log("file====="+file.name)
        return false;
      };

• 提问者 gbwmsw #3

  //然后重写了添加ebook的方法  应该有更简单的方法 只不过我这个会比较繁琐点
    const handleAdd = (info: FileInfo) => {
        if (fileList.value.length >1){
          message.error("你只能上传一个文件")
        }else {
          const formData = new FormData();
          fileList.value.forEach((file: FileItem) => {
            formData.append('file', file as any);
            console.log("ebook===="+file)
  
          });
          formData.append('name',ebook.value.name)
          formData.append('description',ebook.value.description)
          formData.append('category1Id',categoryIds.value[0])
          formData.append('category2Id',categoryIds.value[1])
          if (ebook.value.id != undefined){
            formData.append('id',ebook.value.id)
            formData.append('docCount',ebook.value.docCount)
            formData.append('viewCount',ebook.value.viewCount)
            formData.append('voteCount',ebook.value.voteCount)
          }
          console.log("文件==========="+ebook.value.file)
          axios({
            method:"post",
            url:'/ebook/save',
            data: formData
          }).then((resp)=>{
            const data = resp.data;
            modelvisible.value = false;
  ...
  }

点开查看后面3条评论

Answer 3

甲蛙 2021-04-23 14:59:15

antdv有一个上传组件，可以看一下，各种功能挺全的：https://2x.antdv.com/components/upload-cn

对应的SpringBoot接口可以这样写，就能接收到了

@PostMapping("/upload")
public CommonResp fileUpload(@RequestParam MultipartFile file) {
    // 将file放到本地，或是图片服务器
}

如果对文件上传感兴趣，可以考虑下我另一门课：《Spring Cloud + Vue 前后端分离 开发企业级在线视频课程系统》，关于基本的文件上传、分片上传、断点续传、极速秒传都有介绍到

• 更上层楼 #1

  老师，这个功能可以完善一下吗