view admin Upload 实现带参数手动上传

最新推荐文章于 2024-03-25 08:58:05 发布

qq_40775395

最新推荐文章于 2024-03-25 08:58:05 发布

阅读量1.8k

点赞数

文章标签：前端 java ui

本文链接：https://blog.csdn.net/qq_40775395/article/details/123137432

版权

view admin Upload 实现带参数手动上传


话不多说，直接上代码

<template>
  <div>
    <div>
      <Upload ref="upload"
              type="drag"
              :on-success="uploadSuccess"
              :before-upload="handleUpload"
              :data="uploadData" action="/file/up">
        <div>
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>上传文件</p>
        </div>
      </Upload>
    </div>


    <div v-if="file !== null">文件: {{ file.name }}
      <Button type="success" @click="upload" :loading="loadingStatus">{{ loadingStatus ? '正在上传...' : '上传' }}
      </Button>
    </div>
  </div>


</template>
<script>
  export default {
    data() {
      return {
        uploadData: {
          bucketName: ''
        },
        file: null,
        loadingStatus: false
      }
    },
    methods: {
      handleUpload(file) {
        this.file = file;
        // 我的minio文件服务器“桶”名称 uploadData 为上传参数
        this.uploadData = {bucketName: 'common'} //修改参数位置
        return false;
      },

      
      // 点击上传按钮，上传
      upload() {
        this.loadingStatus = true;
        // 上传之前蒋参数设置好
        this.$refs.upload.post(this.file);
        setTimeout(() => {
          this.file = null;
          this.loadingStatus = false;
          this.$Message.success('Success')
        }, 1500);
      },
      uploadSuccess(res){
        // 上传成功返回数据
        console.log(res)
      }
    }
  }
</script>

action必须填写，我的使用了代理

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9001',
        changeOrigin: true
      },
      '/file': {
        target: 'http://192.168.0.178:10002',
        changeOrigin: true
      }
    }
  }


后台使用spring boot整合minion 代码

@PostMapping("/up")
    public R uploadOneTest(@RequestParam("file") MultipartFile file, @RequestParam("bucketName") String bucketName) 
            throws Exception {
        File zipFile = MultipartFileToFile.multipartFileToFile(file);
        if (zipFile == null) {
            return R.error("文件为空");
        }
        String objectName = zipFile.getName();
        String common = minioUtilService.putObject(bucketName, objectName,
                FileUtil.getInputStream(zipFile));
        return R.success().set("fileUrl", common).set("bucketName", bucketName).set("objectName", objectName);
    }