# 上传下载 我们对文件上传进行了分别封装了多个组件： - 单图片上传（替换图片）：`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` 统一七牛云存储生产环境目录