From 35aff336eb0bd6fa054ef2f0a353215c45783701 Mon Sep 17 00:00:00 2001 From: LGH <1242479791@qq.com> Date: Tue, 14 Apr 2020 09:07:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=89=E5=BE=88=E5=A4=9A=E4=BA=BA=E4=B8=8D?= =?UTF-8?q?=E7=9F=A5=E9=81=93=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E4=B8=8B?= =?UTF-8?q?=E8=BD=BD=E7=9A=84=E9=85=8D=E7=BD=AE=EF=BC=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0=E4=B8=8B=E8=BD=BD=E7=9A=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/文件上传下载.md | 221 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 221 insertions(+) create mode 100644 doc/文件上传下载.md diff --git a/doc/文件上传下载.md b/doc/文件上传下载.md new file mode 100644 index 0000000..3f3bd60 --- /dev/null +++ b/doc/文件上传下载.md @@ -0,0 +1,221 @@ +# 上传下载 + +我们对文件上传进行了分别封装了多个组件： + +- 单图片上传（替换图片）：`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 + +``` + +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 + +``` + +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 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 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) ，如果没有账号的可以注册一个，创建一个华南地区的云存储空间 + +![img](https://box.kancloud.cn/c72238c384fb43c2c0b3161162880056_1909x545.png) + +### 修改后台配置 + +找到`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` 统一七牛云存储生产环境目录