Vue文件上传 自定义样式 Button按钮代替Input 并通过java上传(非分片)到AWS S3

前言

前端使用vue2+elementui2.15.6+axios0.23.0 上传文件，也可使用elementui中的upload上传组件。本文中未使用upload组件，采用button按钮代替input框进行文件上传。

后台使用java8接收，接收文件后上传到AWS S3存储桶。

本文仅记录小文件如图片等，上传到后台的过程。未记录大文件分片上传的代码。

大文件分片上传可参考：vue-simple-loader

vue-simple-loader链接：https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md

本文参考链接：https://www.cnblogs.com/hzx-5/p/9957726.html

重要：：虽然我很菜，写的也不够好，但我不接受任何批评，本文仅供有需要的人参考及自己记录用。

前端部分

Vue

隐藏input框，给input添加 ref="inputer"

<el-button type="primary" @click="fileClick()">文件上传</el-button>
<input type="file" id="fileExport" @change="handleFileChange" ref="inputer" style="display:none">

点击button时，触发input的change方法选择文件

fileClick: function() { // 点击button按钮click事件
　　this.$refs.inputer.dispatchEvent(new MouseEvent('click'))  // 触发input框的click事件
}

input框的change方法

handleFileChange(e) { // 触发input选择文件事件
    var self = this;
    let inputDOM = self.$refs.inputer;
    var file = inputDOM.files[0]; // 通过DOM取文件数据
    var fileName = file.name;
    
    let size = Math.floor(file.size / 1024); //计算文件的大小　
    var formData = new FormData(); // new一个formData事件
    formData.append("file", file); // 将file属性添加到formData里
    formData.append("name", fileName); // 后台可接收的参数
    
    // 使用axios提交到后台
    axios({  
        method:'post',  
        url:'请求后台地址', 
        data: formData,  
        headers:{ 
            'Content-Type': 'multipart/form-data',
            'token': localStorage.getItem('token') // 请求头认证，没有可不填
        },  
    }).then((res)=>{
        // 返回处理结果
    });
}

后台部分

JAVA

 接收vue端传过来的文件及参数

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

@Controller
public class UploadController {

    @Autowired
    private FileService fileService;

    /**
     * 上传文件(小文件)到s3存储桶 未分片
     */
    @RequestMapping(value="/xxx")
    public @ResponseBody void uploadFile(HttpServletRequest request, HttpServletResponse response) {
        String name = request.getParameter("name"); // 文件名
        String suffix = name.split("[.]")[1]; // 文件后缀 .属于特殊字符

        try {
            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
           
            for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {
                MultipartFile mf = entity.getValue();
                // 将获取到的二进制文件上传到 AWS S3存储桶
                fileService.uploadByteToS3(mf.getBytes(), suffix);
            }
            // 返回上传结果等处理
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

上传到AWS S3存储桶

import org.springframework.stereotype.Service;
import software.amazon.awssdk.core.sync.RequestBody;
import software.amazon.awssdk.regions.Region;
import software.amazon.awssdk.services.s3.S3Client;
import software.amazon.awssdk.services.s3.model.PutObjectRequest;
import software.amazon.awssdk.services.s3.model.PutObjectResponse;

@Service
public class FileService {

    /**
     * 小文件(byte)上传到s3存储桶 非分片
     *
     * @param bytes      文件内容
     * @param name       文件名称
     * @param suffix     文件后缀
     */
    public void uploadByteToS3(byte[] bytes, String suffix) {
        try {
            Region region = Region.CN_NORTHWEST_1;
            // 生成随机文件名称，即需要上传的文件名称, 重复的文件名称会覆盖
            String objectKey = System.currentTimeMillis() + "_" + Math.random() + "." + suffix;
            // 初始化S3Client
            S3Client s3 = S3Client.builder()
                    .region(region)
                    .build();
            // 配置元数据 用户定义权限
            PutObjectRequest putOb = PutObjectRequest.builder()
                    .bucket(bucketName)
                    .key(objectKey)
                    .contentType(suffix)
                    .build();
            // 上传方法
            PutObjectResponse response = s3.putObject(putOb, RequestBody.fromBytes(bytes));
            String eTag = response.eTag();
            // 上传成功后，返回可查看的链接
            String url = "https://" + bucketName + ".s3.cn-northwest-1.amazonaws.com.cn/" + objectKey;
            System.out.println("上传成功，链接：" + url);
        } catch (Exception e) {
            // 异常处理
        }
    }

}