vue结合Element UI如何实现Upload组件进行图片上传

朱雀 2023-07-06 14:46 7阅读 0赞

1.  引入`Upload`组件，`action`属性表示必选参数，上传的地址，也是图片要上传的后台`API`地址，我们可以给它绑定一个变量`uploadUrl`。`on-preview`属性表示点击文件列表中已上传的文件时的钩子，函数传入`file`。`on-remove`属性表示 文件列表移除文件时的钩子，函数传入`file`和`fileList`。`list-type`属性是文件列表的类型，是`String`类型，可以设置`picture`，传入图片。`headers`属性是设置上传的请求头部。`on-success`属性是文件上传成功时的钩子，函数传入`response`,`file`和 `fileList`，代码如下：

<el-tab-pane label="商品图片" name='3'>
            <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-tab-pane>

1.  在`data`中，可以定义之前所需要的数据，定义`uploadUrl`，图片的上传地址，也就是我们上传的`API`地址。定义`headerObj`，设置图片上传组件的`headers`请求头对象，添加`Token`验证的`Authorization`，获取`token`，代码如下：

// 上传图片的地址
          uploadUrl: 'http://127.0.0.1:8888/api/private/v1/upload',
          // 设置图片上传组件的headers请求头对象
          headerObj: { 
            Authorization: window.sessionStorage.getItem('token')
          },

1.  在`methods`中，定义`handleSuccess`方法，监听图片上传成功的事件，在里面传入`respons`。拼接得到一个图片信息对象，将图片信息对象`push`到`pics`数组中，`addForm`是整个表单对象的值，里面定义`pics`数组，图片的数组，代码如下：

// 监听图片上传成功的事件
      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)
        }

1.  在`methods`中，定义`handleRemove`方法，处理图片移除的操作，在函数中传入`file`参数。第一步，获取将要删除图片的临时路径。第二步，从`pics`数组中，找到这个图片的对应索引值。第三步，调用数组的`splice`方法，把图片信息对象从`pics`数组中移除，代码如下：

// 处理图片移除的操作
        handleRemove (file) { 
          // console.log(file)
          // 获取将要删除图片的临时路径
          const filePath = file.response.data.tmp_path
          // 从pics数组中，找到这个图片的对应索引值
          const i = this.addForm.pics.findIndex(x => x.index === filePath)
          // 调用数组的splice方法，把图片信息对象从pics数组中移除
          this.addForm.pics.splice(i, 1)
        },

1.  在页面当中定义一个`dialog`，控制图片预览的对话框。`title`是设置对话框的标题，`previewDialogVisible`是控制对话框的显示与隐藏，`width`是设置对话框的宽度。在对话框里面就是预览的图片，图片的地址是动态的，绑定属性`previewPath`，代码如下：

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

1.  在`data`中定义`previewPath`，默认为空，是 图片预览的路径。定义`previewDialogVisible`，默认为`false`，控制图片预览对话框的显示与隐藏，代码如下：

// 图片预览的路径
          previewPath: '',
          // 控制图片预览对话框的显示与隐藏
          previewDialogVisible: false

1.  在`methods`中，定义`handlePreview`函数，传入`file`参数，将响应获得的图片的`url`赋值给`previewPath`，这样就可以获得需要预览图片的路径。将`previewDialogVisible`设置为`true`，关闭对话框，代码如下：

// 处理图片预览效果
        handlePreview (file) { 
          console.log(file)
          this.previewPath = file.response.data.url
          this.previewDialogVisible = true
        },

1.  **vue结合Element UI实现Upload组件进行图片上传**，实现效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020021921513377.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70