关于java实现腾讯cos上传下载的前端代码实现

首先上传功能

前端：

 <el-upload
          class="upload-demo"
          action="#/system/upload/uploadImg/"
          :on-change="handleUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          :on-success="handle_success"
          multiple
          :limit="5"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :data="multipartFile"
          :headers="headers">
          <div slot="tip" class="el-upload__tip"  style="float: left;">只能上传jpg/png文件，且不超过500kb</div>
          <el-button size="small" type="primary"  style="float: left;">点击上传</el-button>
        </el-upload>

下面是前端函数

import { getToken } from '@/utils/auth'

dataL:{
      fileList: [],
      multipartFile: {},
      headers: {
        Authorization : "Bearer " + getToken()
      },
}

handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeUpload(file){
      this.multipartFile = {
        file : file
      };
    },
    handle_success(res) {
		   this.$message.success("上传成功")
	      this.uploadImg.mainId = this.thisLoanId;
	      this.uploadImg.namekey = res;
	      this.fileList =[];
	      addImg(this.uploadImg).then(response => {
	              ......
	          });
			},

后端这边需要对文件数据处理一下

    /**
     * 上传文件
     */
    @PostMapping("/uploadFile")
    @Test
    public String upLoad(@RequestParam MultipartFile file){
        String key = null;
        try {
            // 指定要上传的文件
            File localFile = MultipartFileToFile(file);
            // 指定要上传到 COS 上对象键  test/file.png
            key = new DateTime().toString("yyyyMMddHHmmss") + "_" + file.getOriginalFilename();
            System.out.println("key------------" + key);
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, localFile);
            COSClient cosClient1 = initCOSClient();
            PutObjectResult putObjectResult = cosClient1.putObject(putObjectRequest);
            // 设置权限(公开读)
            cosClient1.setBucketAcl(bucketName, CannedAccessControlList.PublicRead);

            System.out.println("上传ID:"+putObjectResult.getRequestId()+" "+"上传时间"+putObjectResult.getDateStr());
            return key;
        } catch (CosServiceException serverException) {
            serverException.printStackTrace();
        } catch (CosClientException clientException) {
            clientException.printStackTrace();
        }
        return key;
    }


//得到文件file
private File MultipartFileToFile(MultipartFile multiFile) {
        File file = null;
        InputStream inputStream = null;
        OutputStream outputStream = null;
        try {
            inputStream = multiFile.getInputStream();
            file = new File(multiFile.getOriginalFilename());
            outputStream = new FileOutputStream(file);
            write2(inputStream, outputStream);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (inputStream != null) {
                try {
                    inputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            if (outputStream != null) {
                try {
                    outputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return file;
    }

以上就是上传功能，有什么不顺可以留言或者私信我

接下来是下载的前端

		<el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="downloadFile(scope.row)"
          >下载</el-button>

	downloadFile: function (row) {
      this.download('system/upload/download', {
        fileName : row.namekey
      }, row.namekey)
    },

后端代码

    @PostMapping("/downloadFile")
    @Test
    public void download(@RequestParam String fileName) throws IOException {
        // 生成 cos 客户端。
        COSClient cosClient = initCOSClient();
       String desktopPath = ResourceUtils.getURL("classpath:").getPath();

        File downFile = new File(desktopPath + "/" +fileName);
        String key = fileName;

        GetObjectRequest getObjectReq = new GetObjectRequest(bucketName, key);
        ObjectMetadata downObjectMeta = cosClient.getObject(getObjectReq, downFile);

    }

以上代码是将文件下载至服务器，再将服务器下载至浏览器，请看另一篇文章浏览器下载文件