使用 vue 和element ui组件做上传图片功能

最新推荐文章于 2023-11-26 23:29:24 发布

时遇¥.¥..

最新推荐文章于 2023-11-26 23:29:24 发布

阅读量211

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46544600/article/details/110305714

版权

笔记专栏收录该内容

51 篇文章 2 订阅

订阅专栏

实现目标：上传本地图片到页面的指定位置，

  <el-upload  ref="upload" class="avatar-uploader" :file-list="fileList" :show-file-list='false' list-type="picture" :action="uploadUrl" name="imgFile[]" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" accept="image/*" :limit="10">
          <button class="btn" type="primary">上传附件</button>
           <span slot="tip" style="color:#999; line-height:20px">支持png、jpg、jpeg格式的图片，最多10张,单个文件最大限制5M</span>
   </el-upload>
   <div class="img-box" v-for="(item,index) in form.rec_url" :key="index">
 		  <img :src=" baseApi+item" class="avatar">
    </div>

const baseApi = process.env.BASE_API;
export default {
    data() {
   	 	return {
   			 baseApi:baseApi,
   		     fileList: [],
   		     uploadUrl: baseApi + '上传地址'
   			 form:{
   			 		rec_url:[]
    			},
		  }
	},
	methods: {
    	 handleAvatarSuccess(response, file, fileList) {
   		      let path = response.data
   		      this.form.rec_url.push(path[0])
   	  	},
	}
 }