上传图片组件使用

element上传图片

 <div class="photoList">
    <div class="photoTitle">商品主图</div>
    <div class="photoListItem">
    <el-upload                                 
          action="http://sop.rapantaohui.com/system/file/uploadFile"
          list-type="picture-card"
          :on-preview="previewListGoodsImg"
          :on-success="successListGoodsImg"
          :on-remove="removeListGoodsImg"
          :file-list="fileImgList">
      <el-icon>
        <plus />
      </el-icon>
    </el-upload>
    </div>
 </div>

    // 商品主图预览
const previewListGoodsImg = (file: any) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}
// 商品主图上传成功
const successListGoodsImg = (file: any, fileList: any) => {
    // //console.log(file.value, fileList.value)
    fileListGoodsImg.push(file.data.uploadFilePath)
}
// 商品主图删除成功
const removeListGoodsImg = (file: any, fileList: any) => {
    // //console.log(file.value, fileList.value)
    // debugger
    let fileName = file.url

    fileListGoodsImg.splice(fileListGoodsImg.findIndex(e => e == fileName), 1)
}