图片上传（Vue Upload组件） websocket测试 POST http://localhost:3000/api/uploadImageByVue 接口描述 通过Vue的upload组件上传图片 说明 / 示例 自定义`el-upload`上传事件。 生成FormData，append存入键为`image`的文件数据，作为post请求的参数传递过去 <font color=red>**键必须为image**</font> 参考代码： ```html <template> <div id="UserCenter"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="头像"> <div id="avatar"> <el-upload class="avatar-uploader" :show-file-list="false" :http-request="uploadAvatar" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </el-form-item> </el-form> </div> </template> <script> import {updateFile, BackGetMyInfo, BackEditMyInfo} from "@/service/api"; import {message} from "@/plugins/message"; import {PubSub} from 'pubsub-js' export default { name: "UserCenter", data() { return { imageUrl: '', icon: "" } }, methods: { uploadAvatar(obj) { const isJPG = obj.file.type === 'image/jpeg'; const isPNG = obj.file.type === 'image/png'; const isLt2M = obj.file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG) { this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!'); return; } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); return; } const file = new FormData() file.append('image', obj.file); updateFile(file).then(res => { this.imageUrl = res.result this.icon = res.result.substring(21); }) }, } } </script> ```
自定义`el-upload`上传事件。 生成FormData，append存入键为`image`的文件数据，作为post请求的参数传递过去 <font color=red>**键必须为image**</font> 参考代码： ```html <template> <div id="UserCenter"> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="头像"> <div id="avatar"> <el-upload class="avatar-uploader" :show-file-list="false" :http-request="uploadAvatar" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </el-form-item> </el-form> </div> </template> <script> import {updateFile, BackGetMyInfo, BackEditMyInfo} from "@/service/api"; import {message} from "@/plugins/message"; import {PubSub} from 'pubsub-js' export default { name: "UserCenter", data() { return { imageUrl: '', icon: "" } }, methods: { uploadAvatar(obj) { const isJPG = obj.file.type === 'image/jpeg'; const isPNG = obj.file.type === 'image/png'; const isLt2M = obj.file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG) { this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!'); return; } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); return; } const file = new FormData() file.append('image', obj.file); updateFile(file).then(res => { this.imageUrl = res.result this.icon = res.result.substring(21); }) }, } } </script> ```