|
@@ -1,140 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="upload-container">
|
|
|
- <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
|
|
|
- 上传
|
|
|
- </el-button>
|
|
|
- <el-dialog :visible.sync="dialogVisible">
|
|
|
- <el-upload
|
|
|
- :multiple="true"
|
|
|
- :file-list="fileList"
|
|
|
- :show-file-list="true"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- class="editor-slide-upload"
|
|
|
- :action="action"
|
|
|
- list-type="picture-card"
|
|
|
- >
|
|
|
- <el-button size="small" type="primary">
|
|
|
- 点击上传
|
|
|
- </el-button>
|
|
|
- </el-upload>
|
|
|
- <el-button @click="dialogVisible = false">
|
|
|
- 取消
|
|
|
- </el-button>
|
|
|
- <el-button type="primary" @click="handleSubmit">
|
|
|
- 确认
|
|
|
- </el-button>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-// import { getToken } from 'api/qiniu'
|
|
|
-import { uploadFile, getBase64 } from '@/api/other'
|
|
|
-export default {
|
|
|
- name: 'EditorSlideUpload',
|
|
|
- props: {
|
|
|
- color: {
|
|
|
- type: String,
|
|
|
- default: '#1890ff'
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- action: `${this.baseUrl}/mall/uploadFile/imageUpload`,
|
|
|
- dialogVisible: false,
|
|
|
- listObj: {},
|
|
|
- fileList: []
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- checkAllSuccess() {
|
|
|
- return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
|
|
|
- },
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- getBase64(file.raw).then(res => {
|
|
|
- uploadFile({ imgStr: res }).then(response => {
|
|
|
- console.log(response)
|
|
|
- if (response.code === '1') {
|
|
|
- this.form.headpic = response.data
|
|
|
- } else {
|
|
|
- this.$message.error('上传图片失败')
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 对上传图片的大小、格式进行限制
|
|
|
- beforeAvatarUpload(file) {
|
|
|
- const isJPG = file.type === 'image/jpeg'
|
|
|
- const isJPG2 = file.type === 'image/jpg'
|
|
|
- const isPNG = file.type === 'image/png'
|
|
|
- const isLt5M = file.size / 1024 / 1024 < 5
|
|
|
- if (!isJPG && !isJPG2 && !isPNG) {
|
|
|
- this.$message.error('只支持jpg或png格式图片')
|
|
|
- }
|
|
|
- if (!isLt5M) {
|
|
|
- this.$message.error('请上传5MB以内的图片!')
|
|
|
- }
|
|
|
- return (isJPG || isJPG2 || isPNG) && isLt5M
|
|
|
- },
|
|
|
- handleSubmit() {
|
|
|
- const arr = Object.keys(this.listObj).map(v => this.listObj[v])
|
|
|
- if (!this.checkAllSuccess()) {
|
|
|
- this.$message('请等待所有图像成功上载。如果有网络问题,请刷新页面并重新上传!')
|
|
|
- return
|
|
|
- }
|
|
|
- this.$emit('successCBK', arr)
|
|
|
- this.listObj = {}
|
|
|
- this.fileList = []
|
|
|
- this.dialogVisible = false
|
|
|
- },
|
|
|
- handleSuccess(response, file) {
|
|
|
- console.log(response)
|
|
|
- console.log(file)
|
|
|
- const uid = file.uid
|
|
|
- const objKeyArr = Object.keys(this.listObj)
|
|
|
- for (let i = 0, len = objKeyArr.length; i < len; i++) {
|
|
|
- if (this.listObj[objKeyArr[i]].uid === uid) {
|
|
|
- this.listObj[objKeyArr[i]].url = response.files.file
|
|
|
- this.listObj[objKeyArr[i]].hasSuccess = true
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- handleRemove(file) {
|
|
|
- const uid = file.uid
|
|
|
- const objKeyArr = Object.keys(this.listObj)
|
|
|
- for (let i = 0, len = objKeyArr.length; i < len; i++) {
|
|
|
- if (this.listObj[objKeyArr[i]].uid === uid) {
|
|
|
- delete this.listObj[objKeyArr[i]]
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- beforeUpload(file) {
|
|
|
- const _self = this
|
|
|
- const _URL = window.URL || window.webkitURL
|
|
|
- const fileName = file.uid
|
|
|
- this.listObj[fileName] = {}
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- const img = new Image()
|
|
|
- img.src = _URL.createObjectURL(file)
|
|
|
- img.onload = function() {
|
|
|
- _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
|
|
|
- }
|
|
|
- resolve(true)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.editor-slide-upload {
|
|
|
- margin-bottom: 20px;
|
|
|
- /deep/ .el-upload--picture-card {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|