乘风原创程序

  • Vue结合ElementUI上传Base64编码后的图片实例
  • 2022/4/8 15:56:44
  • elementui上传base64编码后的图片

    自我认为elementui还是一个很不错的写手机端的组件,所以这次做小项目的时候就用了elementui的upload组件来实现图片的上传,不过elementui组件的上传图片更易于实现图片以file文件的形式实现,但是这次我需要把图片转换为base64编码来实现图片的上传。

    安装elementui

    npm i element-ui -s

    按需引入(当然如果需要你也可以全部引入)

    import { upload } from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    vue.use(upload);

    上传实现 

    <template>
    ? ? <div>
    ? ? ? ?<el-upload
    ? ? ? ? ? class="avatar-uploader"
    ? ? ? ? ? :action="actionurl"
    ? ? ? ? ? :show-file-list="false"
    ? ? ? ? ? :on-change="getfile">
    ? ? ? ? ? <img v-if="imageurl" ref="phourl" :src="imageurl" class="avatar">
    ? ? ? ? ? <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    ? ? ? ? </el-upload>
    ? ? </div>
    </template>
    <script>
    import {toast} from "mint-ui";
    export default {
    ? ?data() {
    ? ? ? return {
    ? ? ? ?actionurl:'',
    ? ? ? ?imageurl:'', //上传图片
    ? ? ? };
    ? ? },
    ? ? methods: {
    ? ? ?getbase64(file){ ?//把图片转成base64编码
    ? ? ? ? ?return new promise(function(resolve,reject){
    ? ? ? ? ? ? ?let reader=new filereader();
    ? ? ? ? ? ? ?let imgresult="";
    ? ? ? ? ? ? ?reader.readasdataurl(file);
    ? ? ? ? ? ? ?reader.onload=function(){
    ? ? ? ? ? ? ? ? ?imgresult=reader.result;
    ? ? ? ? ? ? ?};
    ? ? ? ? ? ? ?reader.onerror=function(error){
    ? ? ? ? ? ? ? ? ?reject(error);
    ? ? ? ? ? ? ?};
    ? ? ? ? ? ? ?reader.onloadend=function(){
    ? ? ? ? ? ? ? ? ?resolve(imgresult);
    ? ? ? ? ? ? ?}
    ? ? ? ? ?})
    ? ? ?},
    ? ? ?getfile(file,filelist){ ?//上传头像
    ? ? ? ?this.getbase64(file.raw).then(res=>{
    ? ? ? ? ? ?this.$http.post('home/imgupload',{"img":res}).then(result=>{
    ? ? ? ? ? ? ? ?if(result.body.status===200){
    ? ? ? ? ? ? ? ? ? ?this.imageurl=result.body.data;
    ? ? ? ? ? ? ? ?}else{
    ? ? ? ? ? ? ? ? ? ?toast('图片上传失败');
    ? ? ? ? ? ? ? ?}
    ? ? ? ? ? ?})
    ? ? ? ?})
    ? ? ?}
    ? ? }
    }
    </script>
    <style>
    ? .avatar-uploader .el-upload {
    ? ? border: 1px dashed #d9d9d9;
    ? ? border-radius: 6px;
    ? ? cursor: pointer;
    ? ? position: relative;
    ? ? overflow: hidden;
    ? ? width:101px;
    ? ? height:101px;
    ? }
    ? .avatar-uploader .el-upload:hover {
    ? ? border-color: #409eff;
    ? }
    ? .avatar-uploader .el-upload .el-upload__input{
    ? ? ? display: none;
    ? }
    ? .avatar-uploader-icon {
    ? ? font-size: 28px;
    ? ? color: #8c939d;
    ? ? width: 100px;
    ? ? height: 100px;
    ? ? line-height: 100px;
    ? ? text-align: center;
    ? }
    ? .avatar {
    ? ? width: 100px;
    ? ? height: 100px;
    ? ? display: block;
    ? }
    </style>

    elementui把上传的图片转为base64

    使用组件,然后on-change绑定一个方法来获取文件信息,auto-upload设置为false即可 

    ?<el-upload action='' :on-change="getfile" :limit="1" list-type="picture" :auto-upload="false">
    ? ? ? ? ? ? <el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>
    ? ? ? ? ? </el-upload>

    定义methods方法,当上传文件就会触发绑定的函数,然后文件的内容就会绑定到函数的参数里面,这样用file.raw就可以获取文件的内容了。

    ? getfile(file, filelist) {
    ? ? ?console.log(file.raw)
    ? ? },

    然后自定义一个方法,用来把图片内容转为base64格式,imgresult就是base64格式的内容了。转为base64字符串要调用h5特性中的filereader这个api,但是这个api不能return,所以用promise封装一下。

    ?getbase64(file) {
    ? ? ? return new promise(function(resolve, reject) {
    ? ? ? ? let reader = new filereader();
    ? ? ? ? let imgresult = "";
    ? ? ? ? reader.readasdataurl(file);
    ? ? ? ? reader.onload = function() {
    ? ? ? ? ? imgresult = reader.result;
    ? ? ? ? };
    ? ? ? ? reader.onerror = function(error) {
    ? ? ? ? ? reject(error);
    ? ? ? ? };
    ? ? ? ? reader.onloadend = function() {
    ? ? ? ? ? resolve(imgresult);
    ? ? ? ? };
    ? ? ? });
    ? ? },

    最后调用一下

    ?getfile(file, filelist) {? ??
    ? ? ? this.getbase64(file.raw).then(res => {
    ? ? ? console.log(res)
    ? ? ? });
    ? ? },

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。