前端VUE的代碼實現
直接粘貼過來element-UI的組件實現
<el-uploadclass="avatar-uploader"action="/uploadAvatar" //這個action的值是服務端的路徑，其他不用改:show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>后端springboot的代碼實現
package com.aqiuo.controller;import com.aqiuo.entity.dto.Result;
import com.aqiuo.utils.RandomUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpRequest;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;@RestController
@ResponseBody
@Slf4j
public class UploadAvatar {@RequestMapping(value = "/uploadAvatar",method = {RequestMethod.POST})public Result imgUpDown(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {if(!file.isEmpty()) {String fileName = file.getOriginalFilename();String suffixName = fileName.substring(fileName.indexOf("."));//設置上傳文件的保存地址目錄String dirpath=request.getServletContext().getRealPath("/upload");System.out.println(dirpath);File parentFilePath=new File(dirpath);//如果保存文件不存在就先創建目錄if(!parentFilePath.exists()) {parentFilePath.mkdir();}String fileNewName = UUID.randomUUID() + fileName;File newFile = new File(parentFilePath, fileNewName);file.transferTo(newFile);return Result.ok(newFile);}return null;}
}
易錯地點：
文件的存儲位置一定要明確
運行效果
)
