| | |
| | | <template> |
| | | <div class="my-upload"> |
| | | <el-upload :file-list="fileList" class="upload-demo" action="/sccg/file/medias" :multiple="multiple" |
| | | :show-file-list="flag" :before-upload="beforeUpload" :limit="limit" :on-success="handleSuccess" |
| | | :on-error="handleError" :list-type="listType" :headers="getToken()"> |
| | | <el-upload |
| | | :file-list="fileList" |
| | | class="upload-demo" |
| | | action="/sccg/file/medias" |
| | | :multiple="multiple" |
| | | :show-file-list="flag" |
| | | :before-upload="beforeUpload" |
| | | :limit="limit" |
| | | :on-success="handleSuccess" |
| | | :on-error="handleError" |
| | | :list-type="listType" |
| | | :on-preview="handlePreview" |
| | | :on-remove="handleRemove" |
| | | :headers="getToken()"> |
| | | <div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}"> |
| | | <i class="el-icon-plus"></i> |
| | | <span>上传图片</span> |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | methods: { |
| | | // 上传之前回调 |
| | | beforeUpload(rawFile) { |
| | | console.log(rawFile); |
| | | if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') { |
| | | this.$message.error('图片必须是 jpg/svg/jpeg/png 格式!') |
| | | return false |
| | |
| | | }, |
| | | // 上传成功回调 |
| | | handleSuccess(res, file, filelist) { |
| | | console.log(res); |
| | | if(res.data.url1){ |
| | | this.$emit('setPictureUrl',{url:res.data.url1}); |
| | | } |
| | | else if(res.data.url2){ |
| | | this.$emit('setPictureUrl',{url:res.data.url2}); |
| | | } |
| | | else if(res.data.url3){ |
| | | this.$emit('setPictureUrl',{url:res.data.url3}); |
| | | } |
| | | else{ |
| | | this.$emit('setPictureUrl',{url:res.data.url4}); |
| | | } |
| | | }, |
| | | // 上传失败回调 |
| | | handleError(err, file, fileList) { |
| | | console.log(err); |
| | | this.$message({ |
| | | type:'error', |
| | | message:err |
| | | }) |
| | | }, |
| | | // 获取token |
| | | getToken() { |
| | |
| | | if (token && tokenHead) { |
| | | return { Authorization: tokenHead + token } |
| | | } |
| | | }, |
| | | // 预览 |
| | | handlePreview(file){ |
| | | console.log(file) |
| | | }, |
| | | // 移除文件 |
| | | handleRemove(file, fileList){ |
| | | console.log(file,fileList) |
| | | } |
| | | }, |
| | | props: { |
| | | |
| | | // 返回上传成功图片地址 |
| | | setPictureUrl:{ |
| | | type:Function, |
| | | default:()=>{} |
| | | } |
| | | } |
| | | } |
| | | </script> |