vue上传图片及其注意事项

vue上传图片，根据elementUI官网上传组件：

<el-uploadaction="":on-change="handleUpload":file-list="fileList":limit="1"list-type="picture-card":auto-upload="false"><i class="el-icon-plus"></i><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>

//上传图片handleUpload(file){console.log(file)let formData = new FormData()formData.append("file", file.raw)//请求后端goods.upload(formData).then((res) => {//console.log(res)const respData = res.data;if (respData.code === 0) {this.goodsForm.goods_img = `http://localhost:8000/${respData.result.goods_img}`console.log(this.goodsForm.goods_img);this.$message.success(respData.message)} else {this.$message.error(respData.message)}})},

注意file中的raw才是真实文件数据，如果直接用file而不是file.raw，那么会报错

vue上传图片及其注意事项相关推荐

vue 上传图片视频组件，可拍照选择照片，解决苹果手机拍照旋转问题
vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题参考文章: (1)vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题 (2)https://www.cnblogs. ...
vue上传图片组件编写
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 编写一 ...
Vue上传图片（只能上传一个）及可替换
手摸手教你实现vue上传图片-头像,只能上传一张且可重复替换! vue结合element-ui实现上传头像图片话不多说直接上图 . 初始化页面样式可更改哈代码如下 <div style=&q ...
前后端结合实现Vue上传图片并预览效果【Node+Mysql+Vue+Express】
一.话不多,先看效果: 大家好呀,⭐⭐⭐⭐⭐,秉着分享快乐的原则,我来啦~ 很久以前我写过一篇vue上传图片并显示的文章-> 鼠标点击这里~ 但是上次只是写了前端的,并没有把图片存储在服务器 ...
Vue上传图片并预览(好)
原文地址:Vue上传图片并预览_as_64的博客-CSDN博客_vue将文件上传的照片预览 1.input用来接收图片,img用来显示图片,让input变成透明并置于img上 <input cl ...
vue上传图片二（预览、限制大小）
vue上传图片时预览图片前言: 图片上传时所伴随的场景之一对选择的图片在页面上先呈现出来,在此处记录一下该场景功能介绍:图片预览.限制大小(5M).重新选择图片辅助:element-ui 组件库 ...
antd vue上传图片至后端
最近项目有个需求需要在前端vue上传图片,然后在后端将图片存到本地的一个文件夹下. 1.vue 这里是将上传图片封装成了一个组件来使用,组件名为 upload-image.vue <templa ...
vue上传图片，并回显图片
vue上传图片,并回显图片未用组件库,原生的input输入框提交这个看需求吧,用组件库的话,可以减少挺多代码的,但是这个的后端,因为只能单独提交照片,所以我就使用js了.逻辑绕绕的. <in ...
key value vue 输出_vue注意事项总结（一）
1.只有当vue实例被创建时data中存在的属性才是响应式的: 如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值. 2.不要在选项属性或回调上使用箭头函数: ...

vue上传图片及其注意事项

vue上传图片及其注意事项相关推荐

最新文章

热门文章