<el-upload v-model="foodForm.img" class="upload-demo" action="http://localhost:9999/food/upload" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleImageSuccess" :limit="1" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload_tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload>handleExceed(files,fileList){ this.$message.warning('当前限选一个文件') }, handleImageSuccess(res,file){ this.foodForm.img = res.data.url; }, beforeRemove(file,fileList){ return this.$confirm('确定移除该图片吗?'); }, handleRemove(file,fileList){ console.log(file,fileList); }, handlePreview(file){ window.open(file.response.url) console.log(file); },的原理

这段代码使用了element-ui中的上传组件`el-upload`，实现了上传图片的功能。具体原理如下：

1. `v-model="foodForm.img"`：将上传的图片绑定到`foodForm`对象的`img`属性中，即在上传成功后将返回的图片地址赋值给`foodForm.img`；

2. `class="upload-demo"`：为上传组件添加样式，可以自定义样式；

3. `action="http://localhost:9999/food/upload"`：指定上传图片的URL地址；

4. `:on-preview="handlePreview"`：配置图片预览事件方法，点击图片可预览图片；

5. `:on-remove="handleRemove"`：配置文件移除事件方法，移除文件时触发；

6. `:before-remove="beforeRemove"`：配置文件移除前的事件方法，可以在移除前进行确认；

7. `:on-success="handleImageSuccess"`：配置文件上传成功的事件方法，上传成功后触发；

8. `:limit="1"`：限制上传文件数量，此处限制为1个；

9. `:on-exceed="handleExceed"`：配置上传文件数量超出限制时的事件方法；

10. `:file-list="fileList"`：将上传的文件列表绑定到`fileList`属性中；

11. `handleExceed(files,fileList)`：上传文件数量超出限制时的处理函数，此处为弹出提示；

12. `handleImageSuccess(res,file)`：上传成功后的处理函数，将返回的图片地址赋值给`foodForm.img`；

13. `beforeRemove(file,fileList)`：移除文件前的处理函数，返回一个Promise对象，如果Promise的结果为false，则中止移除操作；

14. `handleRemove(file,fileList)`：移除文件后的处理函数，可以在这里添加自己的逻辑；

15. `handlePreview(file)`：预览文件的处理函数，此处将预览图片地址打开新窗口。

总的来说，这段代码使用了element-ui中的上传组件`el-upload`，通过配置不同的事件方法来实现上传、预览、移除等功能。