123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <template>
- <div class="upload-file">
- <el-upload
- :action="action"
- :before-upload="handleBeforeUpload"
- :file-list="fileList"
- :drag="drag"
- :limit="count"
- :multiple="count > 1 ? true : false"
- :on-remove="handleDelete"
- :accept="accept"
- :on-error="handleUploadError"
- :on-exceed="handleExceed"
- :on-success="handleUploadSuccess"
- :on-change="handChange"
- :show-file-list="true"
- :auto-upload="false"
- class="upload-file-uploader"
- ref="upload"
- list-type="picture-card"
- >
- <i class="el-icon-plus"></i>
- <!-- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
- <div class="el-upload__tip" style="margin-top: 0">只能上传.jpg,.jpeg,.png文件</div> -->
- </el-upload>
- </div>
- </template>
- <script>
- export default {
- name: 'upload-file',
- components: {},
- props: {
- // 值
- value: [String, Object, Array],
- // 大小限制(MB)
- fileSize: {
- type: Number,
- default: 2,
- },
- count: {
- type: Number,
- default: 4,
- },
- // 文件类型, 例如['png', 'jpg', 'jpeg']
- fileType: {
- type: Array,
- default: () => [
- '.jpg',
- '.jpeg',
- '.png',
- // ".doc",
- // '.xls',
- // '.xlsx',
- // ".ppt",
- // ".txt",
- // ".pdf",
- // '.csv',
- ],
- },
- // 是否显示提示
- isShowTip: {
- type: Boolean,
- default: true,
- },
- },
- data() {
- return {
- drag: true,
- // 已选择文件列表
- fileList: [],
- // 是否显示文件上传弹窗
- visible: false,
- // 可上传的文件类型
- accept: '',
- action: 'action',
- }
- },
- filters: {},
- computed: {},
- mounted() {},
- watch: {},
- created() {
- // 拼接
- this.fileType.forEach((el) => {
- this.accept += el
- this.accept += ','
- })
- this.fileType.slice(0, this.fileList.length - 2)
- },
- methods: {
- // 上传前校检格式和大小
- handleBeforeUpload(file) {
- // 校检文件类型
- if (this.fileType) {
- let fileExtension = ''
- if (file.name.lastIndexOf('.') > -1) {
- fileExtension = file.name.slice(file.name.lastIndexOf('.'))
- }
- const isTypeOk = this.fileType.some((type) => {
- if (file.type.indexOf(type) > -1) return true
- if (fileExtension && fileExtension.indexOf(type) > -1) return true
- return false
- })
- if (!isTypeOk) {
- this.$message.error(`文件格式不正确, 请上传${this.fileType.join('/')}格式文件!`)
- return false
- }
- }
- // 校检文件大小
- if (this.fileSize) {
- const isLt = file.size / 1024 / 1024 < this.fileSize
- if (!isLt) {
- this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
- return false
- }
- }
- return true
- },
- // 文件个数超出
- handleExceed() {
- this.$message.error(`只允许上传${this.count}个文件`)
- },
- // 上传失败
- handleUploadError(err) {
- this.$message.error('上传失败, 请重试')
- },
- // 上传成功回调
- handleUploadSuccess(res, file) {
- this.$message.success('上传成功')
- this.cancel()
- },
- /** 文件状态改变时调用 */
- handChange(file, fileList) {
- this.fileList = fileList
- console.log(this.fileList)
- },
- // 删除文件
- handleDelete(file, list) {
- var index = this.fileList.findIndex((v) => v.uid === file.uid)
- if (index > -1) {
- this.fileList.splice(index, 1)
- }
- },
- // 获取文件名称
- getFileName(name) {
- if (name.lastIndexOf('/') > -1) {
- return name.slice(name.lastIndexOf('/') + 1).toLowerCase()
- } else {
- return ''
- }
- },
- /** 手动提交上传 */
- submitUpload() {
- if (this.fileList.length <= 0) {
- this.msgError('请选择文件上传')
- return false
- }
- const formData = new FormData()
- // 把多个文件放到同一个请求里,这样只会请求一次接口。否则一个文件就会请求一次
- this.fileList.forEach((el) => {
- formData.append('file', el.raw)
- })
- },
- /** 关闭上传弹框 */
- cancel() {
- this.fileList = []
- this.visible = false
- },
- },
- }
- </script>
|