upload上传图片

最新推荐文章于 2024-07-10 16:53:19 发布

原创最新推荐文章于 2024-07-10 16:53:19 发布

· 1.5k 阅读

2 ·

版权

elementUI 专栏收录该内容

25 篇文章

订阅专栏

这篇博客详细介绍了如何利用Element-UI组件库中的`el-upload`组件来实现图片上传功能，包括设置上传API地址、处理图片预览、移除图片以及成功上传后的操作。同时展示了图片预览的实现方式，通过`el-dialog`展示预览图片。代码中还涉及到响应式头信息设置、图片路径处理和数组操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

           <!-- action 表示图片要上传到的后台API地址 -->
            <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess">
              	<el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

			  <!-- 图片预览 -->
          <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      			<img :src="previewPath" alt="" class="previewImg">
    	</el-dialog>

		
 		addForm: {
        	// 图片的数组
        	pics: []，
        }
       // 上传图片的URL地址
      uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
      // 图片上传组件的headers请求头对象
      headerObj: {
        Authorization: window.sessionStorage.getItem('token')
      },
      previewPath: '',
      previewVisible: false
      },

 // 处理图片预览效果
    handlePreview(file) {
      console.log(file)
      this.previewPath = file.response.data.url
      this.previewVisible = true
    },
    // 处理移除图片的操作
    handleRemove(file) {
      // console.log(file)
      // 1. 获取将要删除的图片的临时路径
      const filePath = file.response.data.tmp_path
      // 2. 从 pics 数组中，找到这个图片对应的索引值
      const i = this.addForm.pics.findIndex(x => x.pic === filePath)
      // 3. 调用数组的 splice 方法，把图片信息对象，从 pics 数组中移除
      this.addForm.pics.splice(i, 1)
      console.log(this.addForm)
    },
    // 监听图片上传成功的事件
    handleSuccess(response) {
      console.log(response)
      // 1. 拼接得到一个图片信息对象
      const picInfo = { pic: response.data.tmp_path }
      // 2. 将图片信息对象，push 到pics数组中
      this.addForm.pics.push(picInfo)
      console.log(this.addForm)
    }