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;
    }

猜你喜欢

转载自blog.csdn.net/qq_36580022/article/details/128451446