连云港建网站公司,wordpress禁止访问后台,wordpress下载远程图片,随便玩玩在线制作网站关键点#xff1a; 父组件给子组件动态传参使用v-bind:属性key#xff08;多个单词用下划线拼接#xff09; 子组件接收父组件传参参数使用 props标签#xff0c;属性key多个单词用驼峰形式拼接#xff09;
子组件定义回调父组件函数 子组件#xff1a; v-on:change 父组件给子组件动态传参使用v-bind:属性key多个单词用下划线拼接 子组件接收父组件传参参数使用 props标签属性key多个单词用驼峰形式拼接
子组件定义回调父组件函数 子组件 v-on:changeuploadFile()
父组件 :after-upload“afterUpload” 然后定一个afterUpload(resp)方法接收子组件传过来的值 div classcol-sm-10file :text上传头像1:input-idimage-upload:suffixs[ [jpg, jpeg, png]]:after-uploadafterUpload/file
script
import File from ../../components/file;export default {components: {File},name: business-teacher,data: function () {},mounted: function () {},methods: {afterUpload(resp) {let _this thislet image resp.content;_this.teacher.image image}}
}
/script子组件
templatedivbutton typebutton v-on:clickselectFile() classbtn btn-white btn-default btn-roundi classace-icon fa fa-upload/i{{ text }}/buttoninput classhidden typefilereffilev-on:changeuploadFile()v-bind:idinputId-input/div
/templatescript
export default {name: file,props: {text: {default: 上传文件},inputId: {default: file-upload},suffixs: {default: []},afterUpload: {type: Function,default: null},},data: function () {return {}},methods: {uploadFile() {let _this this;let formData new window.FormData();let file _this.$refs.file.files[0];// 判断文件格式let suffixs _this.suffixs;let fileName file.name;let suffix fileName.substring(fileName.lastIndexOf(.) 1, fileName.length).toLowerCase();let validateSuffix false;for (let i 0; i suffixs.length; i) {let suffix2 suffixs[i] if (suffix2.toLowerCase() suffix) {validateSuffix true;break;}}if (!validateSuffix) {Toast.warning(文件格式不正确只支持上传 suffixs.join(,));//解决 同一个文件上传2次或者大于2次不会发生变化$(# _this.inputId -input).val();return}// keyfile必须和后端controller参数名一致formData.append(file, file);Loading.show()_this.$api.post(process.env.VUE_APP_SERVER /file/admin/upload, formData).then((response) {Loading.hide()let resp response.dataconsole.log(上传文件成功, resp)//回调父组件函数_this.afterUpload(resp)//解决 同一个文件上传2次或者大于3次不会发生变化$(# _this.inputId -input).val();})},selectFile() {let _this this// console.log(_this.inputId,_this.inputId)$(# _this.inputId -input).trigger(click);}},
}
/scriptstyle scoped
/style
