vue上传图片到指定文件夹

vue代码

<template>
  <div class="app-container">
	<div class="wenben">
      <el-upload
        :disabled="dis==0?true:false"
        class="upload-demo"
        :action="uploadUrl"
        :on-change="handleChange"
        :on-error="uploadFileError"
        :on-success="uploadFileSuccess"
        :show-file-list="false"
        :file-list="fileList"
        :headers="headers"
        name="files"
        ref="upload"
        v-loading.fullscreen.lock="loading"
        element-loading-text="正在上传文件,请稍候......"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0,0.1)"
        multiple
        :limit="2"
        :on-exceed="handleExceed">
        <el-button size="small" type="primary" :disabled="dis==0?true:false">导入可见光图片</el-button>
      </el-upload>
      <span id="txt">未上传</span>
    </div>
   </div>
</template>
export default {
  name: 'Pv',
  // 定义数据
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/system/pv/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      dis: 1,//1 可用 0 不可用
    }
  },
  created() {
  },
  methods: {
    handleChange(file, fileList) {
      if (this.loading && this.num == fileList.length) {
        this.num = 0;
        this.files = []
        this.loading = false;
      } else {
        this.loading = true;
        this.files = fileList
        document.getElementById('txt').innerHTML = '正在上传中...';
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 2 个文件,本次选择了 ${files.length} 个文件`);
    },
    //上传失败
    uploadFileError(err, file, fileList) {
      this.$message.error("上传失败!")
      document.getElementById('txt').innerHTML = '未上传';
      this.dis = 1;
    },
    //上传成功
    uploadFileSuccess(res, file, fileList) {
      this.dis = 0;
      this.dis1 = 1;
      this.files = []
      this.num++;
      this.$refs.upload.clearFiles();
      this.kjlist.push(res.list[0]);
      this.kjlist1.push(res.list1[0]);
      document.getElementById('txt').innerHTML = '上传完成';
    },
 }
 <style>
.wenben {
  margin-top: 5px;
  width: 150px;
  float: left;
}
</style>

后端代码

	@ResponseBody
    @RequestMapping("upload")
    public JSONObject upload(@RequestParam("files") MultipartFile[] files) throws Exception {
        String path = filePath + "kj/";
        List<String> list = new ArrayList<>();
        List<String> list1 = new ArrayList<>();
        try {
            // 创建桶
            minioConfig.makeBucket("guangfu");
            // 设置桶读写权限
            minioConfig.setBucketPolicy("guangfu", "read-write");
            for (int i = 0; i < files.length; i++) {
                String filename = files[i].getOriginalFilename();
                // 新建文件
                File filepath = new File(path, filename);
                // 判断路径是否存在,如果不存在就创建一个
                if (!filepath.getParentFile().exists()) {
                    filepath.getParentFile().mkdirs();
                }
                try {
                    // 写入文件
                    files[i].transferTo(new File(path + File.separator + filename));
                    File temp = new File(path, filename);
                    for (int j = 0; j < j + 1; j++) {
                        if (temp.exists()) {
                            break;
                        }
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
                String url = minioConfig.uploadFile("guangfu","kj/"+filename, path + filename);
                list.add(path + filename);
                list1.add(url);
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("list", list);
        jsonObject.put("list1", list1);
        return jsonObject;
    }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小眼哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值