pc端基于element

pc端基于element"/>

pc端基于element

一：pc端，基于element-ui的文件上传功能

<el-upload class="upload-demo"  :before-upload="beforeUpload"  drag action multiple><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>async beforeUpload(file) {let postParams = new FormData();postParams.append("fileField", file);     // 上传参数{ fileField: file}const res = await this.$store.dispatch('doc-management/saveImport', postParams);console.log("res",res);
}

二：移动端，使用uploader直传图片到oss的功能  ，上传成功后获取到图片，接着合成一整新的海报图片（适用于合成动态二维码海报的需求）

• pages/showCertificate/index.vue   （需要先安装依赖 cnpm i plupload）

  <section  class="pageStatus1" v-if="pageStatus === 1"><img class="uploader_btn" v-if="teacherCert === ''" ref="uploaderInput" @click="uploaderInput"  src="../../assets/showCertificate/upload_btn.png" alt=""><img class="uploader_btn" v-else ref="uploaderInput" @click="uploaderInput" src="../../assets/showCertificate/upload_btn_again.png" alt=""><div class="content_box"><div class="imageWrapper" v-if="posterBase64 === ''"></div><div class="imageWrapper_box" v-else><img class="imageWrapper_kuang" src="../../assets/showCertificate/wrapper_kuang.png" alt=""><div class="imageWrapper_cont"><img class="real_pic" :src="posterBase64" /></div></div><ul class="miniUl"><li v-for="(item,itemI) in defaultSetting.miniImg" :key="itemI" :class="itemI+1 === teacherCertBg ? 'active' :''" @click="chooseComponent(itemI + 1)"><img :src="item" alt=""><p>相框 {{ (itemI+1)  | numFilter }}</p></li></ul></div><img class="sz_btn" @click="uploadBase64" src="../../assets/showCertificate/sz_btn.png" alt=""></section>
  

  init() {this.uploadOss();
  },
  uploadOss() {this.uploaderType = 'cert'; // 上传的是证件照  let uploaderInput = this.$refs.uploaderInput;let that = this;// 一：接口请求 axios.post('****').then(({data}) => {multipart_params = data.data;baseKey = data.data.key;that.uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button: uploaderInput, //触发文件选择对话框的按钮，为那个元素idurl: data.data.host, //服务器端的上传页面地址resize: {width: 4200,//指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度height: 4200,//指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度preserve_headers: false//压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点}})that.uploader.init();// 三：点击事件 文件上传     // 获得的图片上传的地址：<https://****.aliyuncs/> + key that.uploader.bind('FilesAdded', function (uploader, files) { // 限制提交的最多的张数是多少that.defaultSetting.chooseFile = files[0];that.set_upload_param(uploader,files[0].name, false);});// 四：beforeUpload 提前上传that.uploader.bind('BeforeUpload', function (up, file) { });//五：上传成功that.uploader.bind('FileUploaded', function (up, file, info) {if(info.status === 200) {if(that.uploaderType === 'certposter') { // 上传的是证件照合成后的海报 that.teacherCertPoster = that.uploadConfig;that.pageStatus = 2;  //打开第二个弹框that.saveTipPopup = true;console.log("teacherCertPoster",that.teacherCertPoster);}else {// 上传成功 添加为海报的内容axios.post('***', qs.stringify({imgUrl: that.uploadConfig}) ).then(res => {that.teacherCert = 'data:image/jpg;base64,'+ res.data;that.toImageHandled();})}}else {console.log("上传失败",info.response);}});})},
  // 三：点击事件 文件上传 set_upload_param(up, filename, ret, base64tofile){let g_object_name = baseKey + common.timestamp() + filename;multipart_params.key = g_object_name;multipart_params.success_action_status = '200';up.setOption({'url': multipart_params.host,'multipart_params': multipart_params});this.uploadConfig = multipart_params.host +'/'+ g_object_name;if(base64tofile) { //  若是上传的是本地// 上传的base64位的图片的话 那么需要再这里单独上传up.addFile(base64tofile);}up.start();},// 生成晒证照  需要先把base64 上传到oss  获得url地址 toImageHandled(isUpload) {  // 需要在页面渲染出来之后 才可以运行 不然渲染出来 so 需要点击就它了let that = this;this.uploaderType = 'certposter'; setTimeout(() => { // 加缓存处理资源未加载完的坑let el = document.getElementById('Wrapperbox');// 解决生成的canvas在滚动的情况下 的坑window.pageYOffset = 0;document.documentElement.scrollTop = 0document.body.scrollTop = 0;html2canvas( el, {useCORS: true,backgroundColor: null}).then((canvas) => {let dataURL = canvas.toDataURL("image/png");that.posterBase64 = dataURL;});},500 );},uploadBase64() {if(this.posterBase64) {let dataurl = this.posterBase64;let _blob = dataURLtoBlob(dataurl);let suffix = dataurl.split(';')[0].split(':')[1].split('/')[1];//文件扩展名let filename = String(new Date().getTime())+'.'+suffix;let _file = blobToFile(_blob, filename)this.set_upload_param(this.uploader, '证书.png',false, _file);}else {this.$toast.fail({message: '您还未上传照片哦！', icon: 'close' });}},
  

 三：移动端，封装成了组件的图片直传oss功能

• pages/index.vue

• <template><section class="section_box"><Upload-oss :src.sync="imagePath" @srcChangeFun="(data)=>{ imagePath = data}"/>或<Upload-oss :objConfig="{name: pic.name,project: pic.project, dir: pic.dir}" :isMult="true" @srcChangeFun="srcChangeFun"/</section>
  </template><script>
  import UploadOss from "@/components/UploadOss";
  export default {components: { UploadOss },data() {return {imagePath: ''}},
  }
  </script>
  

• components/UploadOss/index.vue

  <template><div><img ref="uploaderInput"  v-if="!src" class="img180" src="<https://***.png>" alt=""><img ref="uploaderInput"  v-else-if='src.indexOf("https://") === -1' class="img180" :src="iceConfig.baseUrl +'/'+ src" /><img ref="uploaderInput"  v-else class="img180" :src="src" /></div>  
  </template><script>
  import { uploadOss } from "./uploadOss"
  export default {props: {src: String,isMult: {type: Boolean,default: false},objConfig: {type: Object,default: ()=>{}}},data() {return  {}},mounted() {this.getAliyunOssConfig();},methods: {async getAliyunOssConfig() {let src = await uploadOss(this.$refs.uploaderInput, this.isMult, this.objConfig)console.log("上传后得到的数据",src);this.$emit('srcChangeFun',src)},}
  }
  </script><style>
  .img180 {width: 120px;height: 120px;
  }
  </style>
  

• components/UploadOss/uploadOss.js

• let multipart_params = {key: '',success_action_status: ''
  };
  let baseKey = '';
  let defaultSetting= {chooseFile: '',
  };
  let uploader={};
  let uploadConfig='';let options = {files: [],index: 0,urlList: ''
  };
  import axios from "./node_modules/axios"
  import qs from "./node_modules/qs"
  import plupload from "plupload";export function uploadOss(uploaderInput, isMult, objConfig = {}) {return new Promise((resolve, reject)=>{// thePath 代表处理后台上传let thePath =  objConfig.dir ;axios.post('*****', qs.stringify({path: thePath})).then(({data}) => {multipart_params = data.data;baseKey = data.data.key;uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',browse_button: uploaderInput, //触发文件选择对话框的按钮，为那个元素idurl: data.data.host, //服务器端的上传页面地址filters: {mime_types : [ //只允许上传图片和zip文件{ title : "Image", extensions : "jpg,gif,png,jpeg" },], },})uploader.init();// 三：点击事件 文件上传 uploader.bind('FilesAdded', function (uploader, files) { // 限制提交的最多的张数是多少// console.log("点击事件 文件上传",files);options.files = files;defaultSetting.chooseFile = files[0];if(Object.keys(objConfig).length > 0) {// console.log("objConfig",objConfig);if(objConfig.name) {set_upload_param(uploader,  objConfig.dir +"/"+ objConfig.project+ objConfig.name, false);return;}else {set_upload_param(uploader, objConfig.dir +"/"+  objConfig.project +files[0].name, false);return;}}// 这次处理 修改了图片上传的名称为随机的32为字符 解决了图片是中文的问题set_upload_param(uploader,baseKey + randomString()+"."+files[0].name.split(".")[1], false);});//五：上传成功uploader.bind('FileUploaded', function (up, file, info) {if(info.status === 200) {if(!isMult) {// 非多选的情况下 可以不要reload// console.log("isMult",isMult );resolve(uploadConfig);}else{// 这一整块的内容 是为了图片管理模块 内部批量上传网页的图片处理的 基本不改动options.urlList = options.urlList + uploadConfig + ',';options.index++;if(options.index < options.files.length) { // 已经全部上传完毕if(Object.keys(objConfig).length > 0) {set_upload_param(uploader, objConfig.dir +"/"+ objConfig.project +options.files[options.index].name, false);return;}set_upload_param(uploader, baseKey + timestamp()+ options.files[options.index].name, false);}else {resolve(options.urlList); reloadData(); }}}else {console.log("上传失败",info.response);resolve('error');reloadData();}});})})
  }
  // 三：点击事件 文件上传 
  function set_upload_param(up, filename, ret, base64tofile){// console.log('filename',filename,"------",multipart_params);multipart_params.key = filename;multipart_params.success_action_status = '200';// console.log('multipart_params',multipart_params);up.setOption({'url': multipart_params.host,'multipart_params': multipart_params});// uploadConfig = multipart_params.host +'/'+ filename;//上面这个是默认的https://***.aliyuncs 这个域名，建议不用用下面这个我们的域名uploadConfig = '<https://****/'+> filename;// console.log("需要上传图片",multipart_params,"uploadConfig",uploadConfig);if(base64tofile) { //  若是上传的是本地// 上传的base64位的图片的话 那么需要再这里单独上传up.addFile(base64tofile);}up.start();
  }
  function reloadData() {multipart_params = {};baseKey = '';defaultSetting= {chooseFile: '',};uploader={};uploadConfig='';options = {files: [],index: 0,urlList: ''};// console.log("reloadData",options);
  }
  function timestamp() {var time = new Date();var y = time.getFullYear();var m = time.getMonth() + 1;var d = time.getDate();var h = time.getHours();var mm = time.getMinutes();var s = time.getSeconds();return "" + y + add0(m) + add0(d) + add0(h) + add0(mm) + add0(s);
  }
  // 生成32位的随机数
  function randomString(e) { // e表示长度 默认32位e  = e || 32;var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",a = t.length,n = "";for(let i=0; i< e; i++) {n += t.charAt(Math.floor(Math.random() * a));}return n;
  }
  function add0(m) {return m < 10 ? '0' + m : m;
  }
  

•