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) {
            // 異常處理
        }
    }

}