123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- <template>
- <div style="">
- <!--
- v-loading="uploadConfig.loading"
- element-loading-text="正在上传..."-->
- <el-upload
- :action="uploadConfig.uploadFileApiUrl+flag"
- :show-file-list="false"
- :on-success="handleImageSuccess"
- :before-upload="beforeImageUpload"
- :headers="myHeaders"
- :title="title"
- ref="uploadCtl"
- :data="data"
- >
- <el-button type="primary" round><slot>{{this.title}}</slot></el-button>
- </el-upload>
- </div>
- </template>
- <script>
- import { getToken } from '@/utils/auth'
- import { Loading } from 'element-ui'
- export default {
- data () {
- return {
- allowFileTypes:'.xls|.xlsx',
- //上传文件配置属性
- uploadConfig:{
- loading:false,
- uploadFileApiUrl: process.env.VUE_APP_BASE_API,
- dialogVisible:false,
- },
- myHeaders: {
- 'token': getToken()
- },
- loadingInstance: false,
- }
- },
- //接收参数
- props:{
- data:{
- type:Object,
- required:false,
- default:null
- },
- //初始化文件列表 默认为空
- fileList:{
- type:String,
- required:false,
- default:""
- },
- //按钮名字
- title:{
- type:String,
- required:true
- },
- //文件标识
- flag:{
- type:String,
- required:true
- },
- //是否支持多选文件 默认为false
- multiple:{
- type:Boolean,
- required:false,
- default:false
- },
- //样式类型(1:图片类型 2.附件类型) 默认1
- styleType:{
- type:Number,
- required:false,
- default:1
- },
- //tip备注提示
- tipMessage:{
- type:String,
- required:false
- },
- //缩略图大小(宽高 例如:100x100)
- thumbnailSize:{
- type:String,
- required:false,
- default:"146x146"
- }
- },
- watch: {
- 'uploadConfig.loading'(val) {
- if (val) {
- this.loadingInstance = Loading.service({
- text: '正在导入请等待...'
- })
- } else {
- this.loadingInstance.close()
- }
- }
- },
- created(){
- var that = this;
- },
- methods:{
- handleImageSuccess(res, file) {
- var that = this;
- that.uploadConfig.loading = false;
- if(res.code == 200){
- this.$notify({
- title: '成功',
- message: '导入成功',
- type: 'success',
- duration: 2000
- })
- this.$emit('fath')
- }
- else{
- this.$notify({
- title: '失败',
- message: res.msg,
- type: 'error',
- duration: 2000
- })
- }
- },
- handleImagefail(res, file)
- {
- var that = this;
- this.$notify({
- title: '成功',
- message: '导入失败',
- type: 'success',
- duration: 2000
- })
- },
- beforeImageUpload(file) {
- var that= this;
- var checkFile = false;
- var fileSize = 100 // MB
- const fileNameSuffix = file.name.substring(file.name.lastIndexOf("."));
- const allowFileTypes = that.allowFileTypes.split("|");
- const fileSizeLimit = file.size / 1024 / 1024 < fileSize;
- if(allowFileTypes && allowFileTypes.length>0){
- for(var i =0; i<allowFileTypes.length;i++){
- if(allowFileTypes[i].toUpperCase() == fileNameSuffix.toUpperCase()){
- checkFile = true;
- break;
- }
- }
- }
- if(!checkFile){
- that.$message.error('上传文件格式错误!');
- return false;
- }
- if (that.styleType == 1 && !fileSizeLimit) {
- that.$message.error(`上传图片大小不能超过 ${fileSize}MB!`);
- return false;
- }
- that.uploadConfig.loading = true;
- return true;
- }
- }
- }
- </script>
- <style>
- </style>
|