vue2使用upload组件上传文件的方法

upload组件的参数属性

action必选参数,上传的地址string
headers设置上传的请求头部object
multiple是否支持多选文件boolean
data上传时附带的额外参数object
name上传的文件字段名stringfile
with-credentials支持发送 cookie 凭证信息booleanfalse
show-file-list是否显示已上传文件列表booleantrue
drag是否启用拖拽上传booleanfalse
accept接受上传的文件类型(thumbnail-mode 模式下此参数无效)string
on-preview点击文件列表中已上传的文件时的钩子function(file)
on-remove文件列表移除文件时的钩子function(file, fileList)
on-success文件上传成功时的钩子function(response, file, fileList)
on-error文件上传失败时的钩子function(err, file, fileList)
on-progress文件上传时的钩子function(event, file, fileList)
on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用function(file, fileList)
before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。function(file)
before-remove删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。function(file, fileList)
list-type文件列表的类型stringtext/picture/picture-cardtext
auto-upload是否在选取文件后立即进行上传booleantrue
file-list上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]array[]
http-request覆盖默认的上传行为,可以自定义上传的实现function
disabled是否禁用booleanfalse
limit最大允许上传个数number
on-exceed文件超出个数限制时的钩子function(files, fileList)-

常用的也只有下面这几个

multiple :是否支持多选文件,

show-file-list :是否显示已上传文件列表,

drag :是否启用拖拽上传,

accept :接受上传的文件类型(thumbnail-mode 模式下此参数无效),

on-preview :点击文件列表中已上传的文件时的钩子(查看文件),

on-remove :文件列表移除文件时的钩子(删除文件),

on-success :文件上传成功时的钩子,

on-progress :文件上传时的钩子,

before-upload :检查文件用的,

list-type :文件列表的类型,

auto-upload :是否选择了文件立即上传,一般默认立即上传,

file-list:文件列表,用来展示上传的文件,后面用来回显文件或图片有用(有固定的格式),

http-request :自定义上传,会覆盖默认的action上传,最常用,

limit :允许上传的最大格式

upload组件的方法

方法名说明参数
clearFiles清空已上传的文件列表(该方法不支持在 before-upload 中调用)
abort取消上传请求( file: fileList 中的 file 对象 )
submit手动上传文件列表

clearFiles :最常用

代码:(组件)

<template>
  <div>
    <el-upload ref="upload" :file-list="imgList" action="#" accept=".jpg,.jpeg,.png,.JPG,.JPEG" :http-request="handleFileUpload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change="onChange" :before-upload="handleBeforeUpload">
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 点击图片查看大图 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
//
import { videoApi } from '@/api/video.js'
// 上传文件的基路径前缀,上传文件的接口会返回一个路径,用来和https://yztest.zjrcq.cn/eyeValleyImg拼接
import { baseUrl } from '@/utils/pictureUrl'
export default {
  name: '',
  props: {
    // 图片列表,用来实现回显,列表格式必须为[{ name: 'placard.jpeg', url: 'https://......' }]
    imgList: {
      default: '',
      type: Array
    }
  },
  data() {
    return {
      // 点击查看图片的路径
      dialogImageUrl: '',
      dialogVisible: false,
      // 文件列表
      fileList: [],
      // 上传的数据
      initForm: {
        id: '',
        picPath: '',
        removed: false
      },
      showBtnDealImg: true,
      noneBtnImg: false,
      limitCountImg: 1 // 上传图片的最大数量
    }
  },

  mounted() {},
  methods: {
    // 上传海报图
    handleFileUpload(fileObject) {
      videoApi.uploadImg(fileObject.file).then(res => {
        const { msg, result } = res
        if (result == 1) {
          // 将图片地址拼接传给父组件
          this.$emit('placardUpload', baseUrl + msg)
        } else {
          this.$message.warning(msg)
        }
      })
    },
    // 清空文件列表的方法,供父组件使用
    clearFiles() {
      this.$refs.upload.clearFiles()
    },
    // 移除
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.$emit('placardUpload', fileList.join(''))
    },
    // 查看大图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 检查图片
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.warning('上传图片不能大于2M')
      }
      return true
    },
    onChange(file, fileList) {}
  }
}
</script>

<style lang="scss">
.disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
</style>

在使用的.vue文件中使用

<el-form-item label="海报图">
        <placardUpload ref="placardUpload" :img-list="placardFileList" @placardUpload="placardUpload" />
</el-form-item>

placardFileList :为了实现图片回显的功能 

placardUpload :接收子组件传过来的数据

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值