# 上傳下載 我們對文件上傳進行了分別封裝了多個組件： - 單圖片上傳（替換圖片）：`src\components\pic-upload` - 多圖片上傳：`src\components\mul-pic-upload` - 文件上傳：`src\components\file-upload` 上述這些文件上傳，都是基于`el-upload`進行封裝 ## 單圖片上傳 在商品分類這個模塊的彈框中可以找到單圖片上傳的例子，對應vue代碼位置：`src\views\modules\category-add-or-update.vue` html: ```html <pic-upload v-model="dataForm.pic"></pic-upload> ``` js: ```javascript import PicUpload from '@/components/pic-upload' export default { data () { return { dataForm: { pic: '' } }, components: { PicUpload } } ``` 這里的文件上傳使用起來非常簡單，只需要將最終文件上傳完成后的路徑進行雙向綁定即可 ## 多圖片上傳 在商品發布這個模塊的中可以找到多圖片上傳的例子，對應vue代碼位置：`src\views\modules\category-add-or-update.vue` html: ```html <mul-pic-upload v-model="dataForm.imgs" /> ``` js: ```javascript import MulPicUpload from '@/components/mul-pic-upload' export default { data () { return { dataForm: { imgs: '' } }, components: { MulPicUpload } } ``` 這里的文件上傳使用起來也非常簡單，最后返回的數據，為以逗號分隔的圖片路徑連接的字符串 ## 服務端代碼 直接的文件上傳的例子與多圖片上傳的例子類似，這里便不一一舉例了。 我們可以查看三個文件上傳的源碼，都有那么兩句話`:action="$http.adornUrl('/admin/file/upload/element')"` `:headers="{Authorization: $cookie.get('Authorization')}"`，其中由于規定后臺所有請求都需要通過 `spring security`的授權，所以需要攜帶通用請求頭`headers`，而`action`則是對應后臺服務器的路徑 我們查看后臺`FileController` 這里對文件上傳的接口進行了統一的管理： ```java @RestController @RequestMapping("/admin/file") public class FileController { @Autowired private AttachFileService attachFileService; @PostMapping("/upload/element") public ResponseEntity<String> uploadElementFile(@RequestParam("file") MultipartFile file) throws IOException{ if(file.isEmpty()){ return ResponseEntity.noContent().build(); } String fileName = attachFileService.uploadFile(file.getBytes(),file.getOriginalFilename()); return ResponseEntity.ok(fileName); } } ``` 同時我們查看`attachFileService` 的實現類，可以知道該文件上傳是通過七牛云進行實現的 ```java @Service public class AttachFileServiceImpl extends ServiceImpl<AttachFileMapper, AttachFile> implements AttachFileService { @Autowired private AttachFileMapper attachFileMapper; @Autowired private UploadManager uploadManager; @Autowired private BucketManager bucketManager; @Autowired private Qiniu qiniu; @Autowired private Auth auth; public final static String NORM_MONTH_PATTERN = "yyyy/MM/"; @Override public String uploadFile(byte[] bytes,String originalName) throws QiniuException { String extName = FileUtil.extName(originalName); String fileName =DateUtil.format(new Date(), NORM_MONTH_PATTERN)+ IdUtil.simpleUUID() + "." + extName; AttachFile attachFile = new AttachFile(); attachFile.setFilePath(fileName); attachFile.setFileSize(bytes.length); attachFile.setFileType(extName); attachFile.setUploadTime(new Date()); attachFileMapper.insert(attachFile); String upToken = auth.uploadToken(qiniu.getBucket(),fileName); Response response = uploadManager.put(bytes, fileName, upToken); Json.parseObject(response.bodyString(), DefaultPutRet.class); return fileName; } } ``` 在這里面注入了非常多的七牛云的配置，而配置文件的來源，來自 ```java @Configuration public class FileUploadConfig { @Autowired private Qiniu qiniu; /** * 華南機房 */ @Bean public com.qiniu.storage.Configuration qiniuConfig() { return new com.qiniu.storage.Configuration(Zone.zone2()); } /** * 構建一個七牛上傳工具實例 */ @Bean public UploadManager uploadManager() { return new UploadManager(qiniuConfig()); } /** * 認證信息實例 * @return */ @Bean public Auth auth() { return Auth.create(qiniu.getAccessKey(), qiniu.getSecretKey()); } /** * 構建七牛空間管理實例 */ @Bean public BucketManager bucketManager() { return new BucketManager(auth(), qiniuConfig()); } } ``` ## 注冊七牛云賬號 現在已經9102年了，很少上傳文件到本地了，一般都是上傳到oss，我們這里選擇[七牛云存儲](https://www.qiniu.com/products/kodo) ，如果沒有賬號的可以注冊一個，創建一個華南地區的云存儲空間  ### 修改后臺配置 找到`shop.properties` 文件 修改 ``` shop.qiniu.resourcesUrl= shop.qiniu.accessKey= shop.qiniu.secretKey= shop.qiniu.bucket= ``` ### 修改vue配置 - 在`static/config/index.js` 修改`resourcesUrl` 統一七牛云存儲開發環境目錄 - 在`static/config/index-prod.js` 修改`resourcesUrl` 統一七牛云存儲生產環境目錄