pc端基于element-ui的文件上传，移动端Vue项目用plupload直传阿里云oss，图片上传后再合成动态海报

最新推荐文章于 2024-10-22 16:11:30 发布

原创

最新推荐文章于 2024-10-22 16:11:30 发布

· 787 阅读

0 ·

版权

文章标签：

#前端 #vue #Plupload #阿里云oss #elementUI

一：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('****').t