个人技术总结--elementui图片上传组件配合表单使用

个人技术总结

---

这个作业属于哪个课程	2020春W班
这个作业要求在哪里	作业要求
这个作业的目标	个人技术总结
作业正文	本文
其他参考文献	elementui官方文档

---

1、技术概述，描述这个技术是做什么？学习该技术的原因，技术的难点在哪里。

elementui是对Vue框架封装的ui组件库，它包含许常用的组件，其中就包含图片上传组件。由于我们项目中的发布功能需要配图所以我使用了elementui的upload上传组件。
我们使用的云图片仓库是七牛云，所以使用难点一个是获取token然后上传，由于获取token和上传到云的操作放在后端实现了，所以前端的问题只有如何配合表单提交动作上传和对已发布的物品的配图进行编辑（增、减）

2、技术详述，描述你是如何实现和使用该技术的，要求配合代码和流程图详细描述。可以再细分多个点，分开描述各个部分。

大体流程：

组件主体代码:

首先可以指定要上传的文件列表或者默认，然后可以指定是否自动上传（添加一张图片马上上传），这里我是设置auto-upload="false"手动上传，因为还有表单的验证，当表单验证没通过就不上传。
当表单验证通过就可以调用手动上传方法this.$refs.upLoad.submit()上传（这个“upload”是自己在组件上指定的引用名）。

3、技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容，不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。

由于是配合表单使用，表单验证通过后开始上传图片，所以要在图片上传完毕再全部提交，所以最后我选择了设置一个上传是否完成的标志uploadFinish，用watch监听。

但是upload组件是一次上传一个文件直到文件列表的文件都上传完，每次上传完毕都会回调handelSuccess函数。我尝试过将文件列表一次性上传，最后没弄成还是只能一次一张。我们是最多三张图片，
所以每次对三张图片进行判断是否是空的，谁还没赋值就按顺序给其赋值。

每次图片列表变动的回调函数传入的filelist和本地指定的filelist会不一样，本地的filelist在运行后会变化，而回调函数提供的filelist是所有要上传文件的列表。


由于我这个上传兼顾从旧有的图片列表编辑和新建一个空列表上传，所以图片列表filelist要在页面初始化时自行填充。imgchanged是在编辑的时候用来判断图片有没有增减，没有的话就省去了一大部分步骤直接提交。

4、总结。

elementui的upload组件本身结合文档使用并不复杂，主要是上传到目标云的token获取和相关的上传方式（一次性多张上传）。

5、参考文献、参考博客（标题、作者、链接）

• elementui-upload的文档
  elementui-upload
• Vue+SpringBoot上传图片到七牛云 作者：风在哪
  Vue+SpringBoot整合七牛云图片上传