< template> < div> < el- upload class = "avatar-uploader" : action= "upload + '/Api/upload'" : show- file- list= "false" : on- success= "upSuccess" : before- upload= "beforeAvatarUpload" : on- exceed= "handleExceed" : on- preview= "handlePreview" : disabled= "disabled" : before- remove= "beforeRemove" accept= "image/*" : headers= "headers" > < img v- if = "fileList" : src= "mubanurl + fileList" class = "avatar" : style= "{ width: width, height: height }" > < i v- else class = "el-icon-plus avatar-uploader-icon" : style= "{ width: width, height: height }" > < / i> < / el- upload> < div> 能上传图片类型: 'jpg' , 'jpeg' , 'png' , 'gif' , 图片大小 : 10M （ 规格：150 * 50 ）< / div> < / div>
< / template>
< script>
import { upload, mubanurl } from '@/api/common.js'
import CryptoJS from '@/assets/js/hash.js'
import { compressImgNew
} from "@/assets/js/picture.js" ;
export default { data ( ) { return { upload : upload, mubanurl : mubanurl, fileList : '' , headers : { } , } } , props : { limit : { type : Number, default : 1 , } , uploadtype : { type : String, default : 'image' , } , showfilelist : { type : Boolean, default : true , } , width : { type : String, default : '80px' , } , height : { type : String, default : '80px' , } , disabled : { type : Boolean, default : false , } , } , mounted ( ) { } , computed : { } , methods : { upSuccess ( res, file ) { this . fileList = '' if ( res. code == 0 ) { this . fileList = res. data. filepaththis . $emit ( 'upload_file' , res. data. filepath) this . $message. success ( res. message) ; } else { this . $message. error ( res. message) ; return } } , beforeAvatarUpload ( file ) { let types = [ "image/jpeg" , "image/jpg" , "image/png" ] ; const isImage = types. includes ( file. type) ; const isLtSize = file. size / 1024 / 1024 < 5 ; if ( ! isImage) { this . $message. warning ( "上传图片只能是 JPG、JPEG、PNG 格式!" ) ; return false ; } if ( ! isLtSize) { this . $message. warning ( "上传图片大小不能超过 5MB!" ) ; return false ; } var currentDate = new Date ( ) ; var formattedDate = currentDate. getFullYear ( ) + '-' + String ( currentDate. getMonth ( ) + 1 ) . padStart ( 2 , '0' ) + '-' + String ( currentDate. getDate ( ) ) . padStart ( 2 , '0' ) ; var password = CryptoJS. MD5 ( "li-tong-gas-" + formattedDate) ; var hashedPassword = this . hashPassword ( password) ; this . headers = { "x-api-key" : hashedPassword, "token" : localStorage. getItem ( "admintoken" ) } return compressImgNew ( file) ; } , hashPassword ( password ) { var salt = CryptoJS. lib. WordArray. random ( 16 ) ; var hash = CryptoJS. SHA256 ( password + salt) ; var hashWithSalt = salt. toString ( ) + hash. toString ( ) ; return hashWithSalt; } , handlePreview ( file ) { console. log ( file, '点击查看' ) ; } , handleExceed ( files, fileList ) { this . $message. warning ( ` 当前限制选择 ${ this . limit} 个文件，本次选择了 ${ files. length} 个文件，共选择了 ${ files. length + fileList. length} 个文件 ` ) ; } , beforeRemove ( file, fileList ) { return this . $confirm ( ` 确定移除 ${ file. name} ？ ` ) ; } , } ,
}
< / script>
< style lang= 'less' scoped>
. avatar- uploader . el- upload { border : 1px dashed #d9d9d9; border- radius: 6px; cursor : pointer; position : relative; overflow : hidden;
} . avatar- uploader . el- upload: hover { border- color: #409EFF;
} . avatar- uploader- icon { font- size: 28px; color : #8c939d; display : flex; justify- content: center; align- items: center;
} . avatar { width : 80px; height : 80px; display : flex; justify- content: center; align- items: center;
}
< / style>
import CryptoJS from 'crypto-js' ;
export const compressImgNew = ( file ) => { return new Promise ( resolve => { const reader = new FileReader ( ) const image = new Image ( ) image. onload = ( imageEvent ) => { const canvas = document. createElement ( 'canvas' ) const context = canvas. getContext ( '2d' ) const width = image. width / 1.05 const height = image. height / 1.05 canvas. width = width canvas. height = height context. clearRect ( 0 , 0 , width, height) context. drawImage ( image, 0 , 0 , width, height) const dataUrl = canvas. toDataURL ( file. type) const blobData = dataURLtoBlob ( dataUrl, file. type) resolve ( blobData) } reader. onload = e => { image. src = e. target. result } reader. readAsDataURL ( file) } )
} ;
function dataURLtoBlob ( dataURL, type ) { var binary = atob ( dataURL. split ( ',' ) [ 1 ] ) var array = [ ] for ( var i = 0 ; i < binary. length; i++ ) { array. push ( binary. charCodeAt ( i) ) } return new Blob ( [ new Uint8Array ( array) ] , { type : type } )
}
export function encrypt ( data ) { let key = MD5 ( process. env. VUE_APP_BASE_KEY ) var x = 0 var len = data. lengthvar l = data. lengthvar char = '' var str = '' for ( var i = 0 ; i < len; i++ ) { if ( x === l) { x = 0 } char += key. charAt ( x) x++ } for ( var j = 0 ; j < len; j++ ) { str += String. fromCharCode ( data. charCodeAt ( j) + ( char. charCodeAt ( j) % 256 ) ) } return btoa ( str)
} function MD5 ( data ) { const hashedPassword = CryptoJS. MD5 ( data) . toString ( ) return hashedPassword
} < template> < div> < ! -- : file- list= "fileList" : limit= "limit" -- > < el- uploadclass = "upload-demo" : action= "upload + '/Api/uploadFile'" : on- preview= "handlePreview" : disabled= "disabled" : on- remove= "handleRemove" : before- remove= "beforeRemove" multiple : on- exceed= "handleExceed" : on- success= "upSuccess" : before- upload= "beforeAvatarUpload" : show- file- list= "false" : file- list= "fileList" : headers= "headers" > < el- button size= "mini" type= "primary" > 点击上传< / el- button> < / el- upload> < div> 能上传文件类型: xlsx , word , Excel , 图片 , pdf文件大小 : 20M< / div> < / div>
< / template>
< script>
import { upload, mubanurl } from "@/api/common.js" ;
import CryptoJS from "@/assets/js/hash.js" ;
export default { data ( ) { return { upload : upload, mubanurl : mubanurl, url : "" , srcList : [ ] , } ; } , props : { limit : { type : Number, default : 1 , } , uploadtype : { type : String, default : "image" , } , fileList : { type : Array, default : ( ) => [ ] , } , showfilelist : { type : Boolean, default : true , } , disabled : { type : Boolean, default : false , } , } , mounted ( ) { } , computed : { headers ( ) { var currentDate = new Date ( ) ; var formattedDate = currentDate. getFullYear ( ) + "-" + String ( currentDate. getMonth ( ) + 1 ) . padStart ( 2 , "0" ) + "-" + String ( currentDate. getDate ( ) ) . padStart ( 2 , "0" ) ; var password = CryptoJS. MD5 ( "li-tong-gas-" + formattedDate) ; var hashedPassword = this . hashPassword ( password) ; let obj = { "x-api-key" : hashedPassword, token : localStorage. getItem ( "admintoken" ) , } ; return obj; } , } , methods : { upSuccess ( res, file ) { if ( res. code == 0 ) { this . $emit ( "upload_file" , { fileurl : res. data. filepath, name : file. name, } ) ; } else { this . $message. error ( res. message) ; return ; } } , beforeAvatarUpload ( file ) { const filesize = file. size / 1024 / 1024 ; if ( filesize > 20 ) { this . $message. error ( "上传图片大小不能超过 20MB!" ) ; return ; } return file; } , hashPassword ( password ) { var salt = CryptoJS. lib. WordArray. random ( 16 ) ; var hash = CryptoJS. SHA256 ( password + salt) ; var hashWithSalt = salt. toString ( ) + hash. toString ( ) ; return hashWithSalt; } , handleRemove ( file, fileList ) { let ary = [ ] ; fileList. forEach ( ( it ) => { ary. push ( it. response. data. filepath) ; } ) ; } , handlePreview ( file ) { console. log ( file, "点击查看" ) ; } , handleExceed ( files, fileList ) { this . $message. warning ( ` 请删除之前上传的文件后，再继续上传！ ` ) ; } , beforeRemove ( file, fileList ) { return this . $confirm ( ` 确定移除 ${ file. name} ？ ` ) ; } , } ,
} ;
< / script>
< style lang= "less" scoped>
. avatar- uploader . el- upload { border : 1px dashed #d9d9d9; border- radius: 6px; cursor : pointer; position : relative; overflow : hidden;
} . avatar- uploader . el- upload: hover { border- color: #409eff;
} . avatar- uploader- icon { font- size: 28px; color : #8c939d; width : 178px; height : 178px; line- height: 178px; text- align: center;
} . avatar { width : 178px; height : 178px; display : block;
}
< / style> 
