今天再写一个前端上传页面，具体思路就是用户可以上传多张图片，上传之后就存到七牛云然后写入数据库，如果用户发现某一张上传错误，可以删除，然后对于的数据库信息也要删除。
因为我是完全小白自学入门，目前学习了2个月，后端用THINKPHP写的接口，已经搞定了，前端这个上传搞了一天，终于捣鼓明白了，写下来留作纪念！
首先引入Element UI 的上传组件：
<el-form-itemlabel="上传:"><el-uploadaction="http://****/api/v1/uploadimg"//后端接受地址:headers="head":multiple="true"name="imglist"list-type="picture-card"accept="image/png, image/jpeg":limit="20":on-success="onSuccess":on-remove="onRemove"><iclass="el-icon-plus"></i></el-upload><el-dialog:visible.sync="dialogVisible"><imgwidth="50%":src="dialogImageUrl"alt=""></el-dialog></el-form-item>
这个具体流程就是，用户选择图片之后直接上传到的七牛云的存储中，然后写入数据库。onSucess 就是用来接收成功上传返回的图片信息。
Vue中Data中的数据定义如下：
export default { data() { return { head: { //这个地方是获取token，请求地址需要携带token访问 'Authorization': this.$store.state.user }, dialogImageUrl: '', dialogVisible: false, imgList: [], } } }
Vue中method方法的定义如何：
methods: { // 删除文件 async onRemove(file, fileList) { // 查找与ID一致的图片索引 let index = this.imgList.findIndex(item=>{ return item.id == file.response.data.id }) // 根据索引删除图片 let datas = { id: file.response.data.id, user_id: file.response.data.user_id } //这就是一个请求地址 const res = await deleteImg(datas) if(res.status !== 200) return this.$message.error('删除失败') // 根据索引珊瑚数据 this.imgList.splice(index,1) this.$message.success('删除成功') }, // 上传成功 onSuccess(response){ this.imgList.push(response.data) } }
这样就可以实现图片的上传与删除，然后对于的修改数据库里面的信息，修改之后前端也可以获取最新的图片数量。
