element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用
1、element UI上传图片Upload组件使用
效果图
结构
<el-form-item label="实体图片"><el-uploadaction="#":on-change="getFile":file-list="fileList"list-type="picture-card":auto-upload="false"ref="pictureUpload"><i slot="default" class="el-icon-plus"></i><div slot="file" slot-scope="{ file }"><imgclass="el-upload-list__item-thumbnail":src="file.url"alt=""/><span class="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span><spanv-if="!disabled"class="el-upload-list__item-delete"@click="handleRemove(file)"><i class="el-icon-delete"></i></span></span></div></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></el-form-item>
数据
data() {return {// 上传图片dialogImageUrl: "",dialogVisible: false,disabled: false,ruleForms: {items: [{}] },fileList: [// {// name: "food.jpeg",// url: "/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",// },// {// name: "food2.jpeg",// url: "/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",// },],imageInfo: {},imageList: [],formInline: {image64: "",imageName: "",},};},
图片信息处理
2、图片转base64和fale文件处理
方法
methods: {// 图片增删handleRemove(file) {// ⭐ 获取到该组件调用handleRemove方法删除file对象this.$refs.pictureUpload.handleRemove(file);},handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},// 图片 转base64getBase64(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) {console.log(file, "kkkkkkkkkkkkkkkkk");console.log(file.name, "yyyyyyyyyy");this.imageList = JSON.parse(JSON.stringify(fileList));console.log(fileList, "前");console.log(this.imageList, "后");//fileList图片文件集合let fileAllList = JSON.stringify(this.imageList);console.log(fileAllList, "定");this.getBase64(file.raw).then((res) => {// console.log(res, "ffffffffffffff");this.formInline.image64 = res;// this.imageInfo.base64 = this.formInline.image64;// this.imageInfo.name = file.name;file.base64 = res;console.log(file, "名字");});console.log(this.imageInfo, "qqqqqqqqqqqqqq");// fileList.push({// name: $(this).attr('alt'),// base64: $(this).attr('src')//}},}
base64数据打印
fale数据打印
图片上传功能
结构
<el-button type="primary" @click="addEntity()">确定上传图片</el-button>
功能
3、formdata数据参数格式的应用
格式效果-network请求
<script>import {add} from "@/api/knowledge/entityLibrary";export default {methods:{addEntity() {//fale文件集合处理var array = new Array();for (var j in this.imageList) {array.push(this.imageList[j].raw); //将每一次循环创建的对象push到数组中去}console.log(array, "wwwwwwwwwwwwwwwwwwww");// console.log(this.ruleForms.items, "6666666666");// const data = new FormData();// data.append("name", "实体名称");// data.get("name");// // 新建 列表数据let params = {examplesName: this.formInline.examplesName,entityModelName: this.formInline.entityModelName,examplesDescribe: this.formInline.examplesDescribe,examplesDictionaries: this.formInline.examplesDictionaries,// updateTimeMS: "-12-12 10:18:29",// reviser: "admin",// attributeNames: ["relationNames", "亲人"],// attributeValues: ["12", "13"],};console.log(params, "yyyyyyyyyyyyy");//formdata数据格式的应用const data = new FormData();console.log(this.imageList, "xxxxxxxxxxxxxxxxxxxxxxxxx");// data.append("examplesName", "实体名称");// data.append("entityModelName", "实体类型名称");// data.append("examplesDescribe", "实体描述");// data.append("examplesDictionaries", "实体字典");// base64版// data.append("examplesName", this.formInline.examplesName);// data.append("entityModelName", this.formInline.entityModelName);// data.append("examplesDescribe", this.formInline.examplesDescribe);// data.append("examplesDictionaries", this.formInline.examplesDictionaries);// data.append("examplesVo[0].attributeVoNames", "国家名称");// data.append("examplesVo[0].attributeVoValues", "国家值");data.append("examplesVo",JSON.stringify([{attributeVoNames: "属性名称1",attributeVoValues: "属性值",},{attributeVoNames: "属性名称2",attributeVoValues: "属性值",},]));//拼接版data.append("examplesModel", JSON.stringify(params));data.append("uploadFiles", JSON.stringify(array));// data.append("uploadFiles", array);add(data).then((res) => {// console.log(res, 789456);// this.dialogVisibleB = false;// window.parent.location.reload();});},}}
4、数据展示
