乘风原创程序

  • 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)
? ? ? });
? ? },

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