New file |
| | |
| | | <template> |
| | | <div> |
| | | <el-upload |
| | | ref="refUploadVideo" |
| | | action="#" |
| | | :before-upload="beforeUploadVideo" |
| | | accept="video/mp4" |
| | | :limit="1" |
| | | :file-list="uploadVideos" |
| | | :on-change="addUploadImg" |
| | | :on-remove="delUploadImg" |
| | | :http-request="reqUploadVideo" |
| | | style="width: 200px" |
| | | > |
| | | <video |
| | | v-if="uploadVideos.length" |
| | | class="com-up-video" |
| | | :src="uploadVideos[0].url" |
| | | controls="controls" |
| | | >您的浏览器不支持视频播放</video> |
| | | <template v-else> |
| | | <i class="el-icon-plus" /> |
| | | <span>选择视频</span> |
| | | </template> |
| | | |
| | | </el-upload> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import mixin_upload from '@/mixins/upload.js' // 通用上传视频预览 |
| | | export default { |
| | | mixins: [mixin_upload], |
| | | model: { |
| | | prop: 'uploadVideos', |
| | | event: 'change' |
| | | }, |
| | | props: { |
| | | uploadVideos: { |
| | | type: Array, |
| | | default: () => { |
| | | return [] |
| | | } |
| | | }, |
| | | accept: { |
| | | type: String, |
| | | default: () => { |
| | | return 'image/jpeg,image/jpg,image/gif,image/png' |
| | | } |
| | | } |
| | | |
| | | }, |
| | | |
| | | data() { |
| | | return { |
| | | callback: null |
| | | } |
| | | }, |
| | | methods: { |
| | | // 上传视频 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ |
| | | // 上传前回调 |
| | | beforeUploadVideo(file) { |
| | | var fileSize = file.size / 1024 / 1024 < 50 |
| | | if (['video/mp4'].indexOf(file.type) === -1) { |
| | | this.$message.error('必须是mp4文件') |
| | | return false |
| | | } |
| | | if (!fileSize) { |
| | | this.$message.error('视频大小不能超过50MB') |
| | | return false |
| | | } |
| | | this.isShowUploadVideo = false |
| | | }, |
| | | // 增加视频 |
| | | addUploadImg(file, fileList) { |
| | | this.$emit('change', fileList) |
| | | }, |
| | | // 删除视频 |
| | | delUploadImg(file, fileList) { |
| | | this.$emit('change', fileList) |
| | | }, |
| | | |
| | | // 上传视频 |
| | | reqUploadVideo(res) { |
| | | const file = res.file |
| | | const formData = new FormData() |
| | | formData.append('file', file) |
| | | this.postFN({ |
| | | url: 'admin/image/upload?type=1', |
| | | header: { 'Content-Type': 'multipart/form-data' }, |
| | | params: formData, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | imgUrl: 'https://www.w3school.com.cn/i/movie.mp4' |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | // 替换掉未上传的图片 |
| | | this.$emit('change', [{ name: '视频', url: inf.imgUrl, status: 'success' }]) |
| | | |
| | | console.log('上传视频成功且结束') |
| | | |
| | | // 提交 |
| | | // this.$set(this.dialogData, 'imgUrl', inf.imgUrl) |
| | | this.callback && this.callback(inf.imgUrl) |
| | | }) |
| | | } |
| | | // 上传视频 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .el-upload-list__item{ |
| | | transition: none; |
| | | } |
| | | </style> |
| | |
| | | 图片:<br><span>(668*164像素)</span> |
| | | </span> |
| | | <!-- 上传图片组件(单图) --> |
| | | <el-upload |
| | | <UploadSingleImg |
| | | ref="refUploadImg" |
| | | accept="image/jpeg,image/jpg,image/gif,image/png" |
| | | :auto-upload="false" |
| | | list-type="picture-card" |
| | | :class="{disabled:uploadDisabled}" |
| | | action="#" |
| | | :limit="1" |
| | | :file-list="mData.uploadImgs" |
| | | :on-change="addUploadImg" |
| | | :on-remove="delUploadImg" |
| | | :http-request="uploadImg" |
| | | :on-preview="uploadPreview" |
| | | :before-upload="beforeUploadImg" |
| | | > |
| | | <i class="el-icon-plus" /> |
| | | </el-upload> |
| | | v-model="mData.uploadImgs" |
| | | @change.capture="$refs.refDialog.clearValidate()" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="是否上架:"> |
| | | <el-switch v-model="mData.isUp" :active-value="1" :inactive-value="0" /> |
| | |
| | | <script> |
| | | import WangEnduit from '@/components/WangEnduit' // 富文本 |
| | | import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览 |
| | | import UploadSingleImg from '@/components_simple/UploadSingleImg' |
| | | import Area from '@/utils/area' // 地区选择 |
| | | export default { |
| | | name: 'DemoForm', |
| | | components: { WangEnduit }, |
| | | components: { WangEnduit, UploadSingleImg }, |
| | | mixins: [ |
| | | mixin_upload |
| | | ], |
| | |
| | | }, |
| | | // 富文本相关 |
| | | |
| | | // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ |
| | | // 上传前确认格式 |
| | | beforeUploadImg(file) { |
| | | const isImg = file.type.indexOf('image/') > -1 |
| | | if (!isImg) { |
| | | this.$message.error('必须是选择图片文件') |
| | | } |
| | | return isImg |
| | | }, |
| | | // 增加图片 |
| | | addUploadImg(file, fileList) { |
| | | this.mData.uploadImgs = fileList |
| | | this.$refs.couponForm.validateField('uploadImgs') |
| | | }, |
| | | // 删除图片 |
| | | delUploadImg(file, fileList) { |
| | | this.mData.uploadImgs = fileList |
| | | }, |
| | | // 上传图片 |
| | | uploadImg(res) { |
| | | const file = res.file |
| | | const formData = new FormData() |
| | | formData.append('file', file) |
| | | this.postFN({ |
| | | url: 'admin/image/upload', |
| | | header: { 'Content-Type': 'multipart/form-data' }, |
| | | params: formData, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | imgUrl: 'xxxx' |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | console.log('上传图成功') |
| | | this.$set(this.mData, 'imgUrl', inf.imgUrl) |
| | | console.log('上传图结束') |
| | | |
| | | // 上传完图片 |
| | | this.submitReq() |
| | | }) |
| | | }, |
| | | // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ |
| | | |
| | | submit() { |
| | | this.$refs['couponForm'].validate(valid => { |
| | | if (valid) { |
| | | if (this.checkNeedUpload(this.mData.uploadImgs)) { |
| | | console.log('开始上传图片') |
| | | // 先上传图片,再提交 |
| | | this.$refs.refUploadImg.submit() |
| | | } else { |
| | | // 提交 |
| | | // 上传图片 |
| | | this.$refs.refUploadImg.runUploadImg((imgUrl) => { |
| | | imgUrl && this.$set(this.mData, 'imgUrl', imgUrl) |
| | | this.submitReq() |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | |
| | | /> |
| | | |
| | | <!-- 新增&编辑 --> |
| | | <el-dialog :title="adminDialogData.type=='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="adminDialogVisible" append-to-body> |
| | | <el-dialog :title="adminDialogData.type=='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="adminDialogVisible" append-to-body :before-close="hideDialog"> |
| | | <el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules" size="small"> |
| | | <el-form-item label="名称" prop="name"> |
| | | <el-input v-model="adminDialogData.name" placeholder="请输入名称" /> |
| | |
| | | <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" /> |
| | | </el-form-item> |
| | | <el-form-item ref="uploadFormItem" label="轮播图:" prop="uploadImgs"> |
| | | <!-- 上传图片组件(单图) --> |
| | | <el-upload |
| | | <!-- 上传图片组件(多图) --> |
| | | <UploadSingleImg |
| | | ref="refUploadImg" |
| | | accept="image/jpeg,image/jpg,image/gif,image/png" |
| | | :auto-upload="false" |
| | | list-type="picture-card" |
| | | :class="{disabled:uploadDisabled}" |
| | | action="#" |
| | | :limit="1" |
| | | :file-list="dialogData.uploadImgs" |
| | | :on-change="addUploadImg" |
| | | :on-remove="delUploadImg" |
| | | :http-request="uploadImg" |
| | | :on-preview="uploadPreview" |
| | | :before-upload="beforeUploadImg" |
| | | > |
| | | <i class="el-icon-plus" /> |
| | | </el-upload> |
| | | v-model="dialogData.uploadImgs" |
| | | @change.capture="$refs[formName].clearValidate()" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="跳转类型:" prop="jumpType"> |
| | | <el-select |
| | |
| | | |
| | | import mixin_Upload from '@/mixins/upload.js' |
| | | import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 通用轮播图下拉选项 |
| | | import UploadSingleImg from '@/components_simple/UploadSingleImg' |
| | | export default { |
| | | name: 'Equipment', |
| | | components: { UploadSingleImg }, |
| | | mixins: [mixin_Upload, mixin_bannerOpts], |
| | | data() { |
| | | return { |
| | |
| | | init() { |
| | | this.getList() |
| | | }, |
| | | |
| | | // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ |
| | | // 上传前确认格式 |
| | | beforeUploadImg(file) { |
| | | const isImg = file.type.indexOf('image/') > -1 |
| | | if (!isImg) { |
| | | this.$message.error('必须是选择图片文件') |
| | | } |
| | | return isImg |
| | | }, |
| | | // 增加图片 |
| | | addUploadImg(file, fileList) { |
| | | this.$refs.uploadFormItem.resetField() |
| | | this.dialogData.uploadImgs = fileList |
| | | }, |
| | | // 删除图片 |
| | | delUploadImg(file, fileList) { |
| | | this.dialogData.uploadImgs = fileList |
| | | }, |
| | | // 执行上传图 |
| | | runUploadImg(suc_cb) { |
| | | if (this.checkNeedUpload(this.dialogData.uploadImgs)) { |
| | | this.$refs.refUploadImg.submit() |
| | | } else { |
| | | suc_cb && suc_cb() |
| | | } |
| | | }, |
| | | // 上传图 |
| | | uploadImg(res) { |
| | | console.log(res) |
| | | const file = res.file |
| | | const formData = new FormData() |
| | | formData.append('file', file) |
| | | console.log(formData) |
| | | this.postFN({ |
| | | url: 'admin/image/upload', |
| | | header: { 'Content-Type': 'multipart/form-data' }, |
| | | params: formData, |
| | | mockData: { |
| | | code: 100, |
| | | msg: '', |
| | | data: { |
| | | imgUrl: 'xxxx' |
| | | } |
| | | } |
| | | }, (inf) => { |
| | | console.log('上传图片成功') |
| | | |
| | | // 替换掉未上传的图片 |
| | | this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' } |
| | | this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs)) |
| | | this.$set(this.dialogData, 'imgUrl', inf.imgUrl) |
| | | |
| | | console.log('上传图片结束') |
| | | |
| | | // 提交 |
| | | this.submit(this.dialogData.type) |
| | | }) |
| | | }, |
| | | // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ |
| | | |
| | | // 获取列表 |
| | | getList() { |
| | |
| | | this.$refs[this.formName].validate((valid) => { |
| | | if (valid) { |
| | | // 上传图片 |
| | | this.runUploadImg(() => { |
| | | this.$refs.refUploadImg.runUploadImg((imgUrl) => { |
| | | imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl) |
| | | this.submit(type) |
| | | }) |
| | | } |
| | |
| | | // background: #999; |
| | | } |
| | | .el-icon-check{ |
| | | background: #409EFF; |
| | | // background: #999; |
| | | color: #409EFF; |
| | | // color: #999; |
| | | } |
| | | } |
| | | } |