Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how vue uses Element el-upload components". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Catalogue

I. basic use

II. Control of the number of pictures

Third, picture format restriction / multiple pictures can be selected

Add: use element-ui 's Upload upload component in vue projects

I. basic use

Recently, I have studied the el-upload components and stepped on some small holes to write about them.

One of the things that happens very often is to directly copy the components of element to use, but when you use the upload components, you will encounter a hole.

If you use upload directly, you will definitely encounter this error.

And the uploaded image may suddenly disappear, and at this time, if you don't have an interface, you have no idea why you removed it, so when you don't have an interface, you can only guess whether the picture disappears because of cross-domain error.

Finally, to get the address of the company and adjust the interface, the answer is action= "https://jsonplaceholder.typicode.com/posts/". This is the action parameter in element. When he uses html, he will call ajax so that the same origin policy is different, resulting in an error.

In general, companies will provide an address link that converts pictures to url format. You just need to call it to save it, but you may encounter things that require token permission, and things that are rarely done at this time come. Generally, you don't bring token directly through the component, so you need to carry token through the el-upload component.

Import {getToken} from'@ / utils/token' data () {return {importHeaders: {token: getToken ()},}; 2. Control the number of images / / upload a maximum of several images masterFileMax (files, fileList) {console.log (files, fileList); this.$message.warning (`Please upload a maximum of ${this.limit} files. `);}, III. Picture format restriction / multiple pictures can be selected

Examples

Import {getToken} from'@ / utils/token'export default {name:'feedback', data () {return {importHeaders: {token: getToken ()}, images: [], limit:9} }, methods: {/ / Delete handleRemove (file, fileList) {const idx= this.images.findIndex (it= > it===file.response.data.fullurl) this.images.splice (idx,1)}, handlePictureCardPreview (file) {this.dialogImageUrl = file.url; this.dialogVisible = true;}, / / handleAvatarSuccess (response, file, fileList) {console.log (response, file, fileList) after uploading successfully If (response.code===1) {this.images.push (response.data.fullurl)}}, / / upload at most several images masterFileMax (files, fileList) {console.log (files, fileList); this.$message.warning (`Please upload a maximum of ${this.limit} files. `);}

Add: use the Upload upload component of element-ui in the vue project to determine

ImportFileUrl is the backend interface, upLoadData is the additional parameter to upload the file, uploadError is the fallback function when the file fails to upload, uploadSuccess is the fallback function when the file is uploaded successfully, and beforeAvatarUpload is the function called before uploading the file. We can determine the file type here.

Data () {importFileUrl: 'http:dtc.com/cpy/add', upLoadData: {cpyId:' 123456, occurTime: '2017-08}}, methods: {/ / callback uploadSuccess (response, file, fileList) {console.log (' upload file', response)} after successful upload, / / upload error uploadError (response, file) FileList) {console.log ('upload failed Please try again!) } / / judgment of file size before upload beforeAvatarUpload (file) {const extension = file.name.split ('.') [1] = = 'xls' const extension2 = file.name.split ('.') [1] = = 'xlsx' const extension3 = file.name.split ('.') [1] = = 'doc' const extension4 = file.name.split ('.') [1] = 'docx' Const isLt2M = file.size / 1024 / 1024 < 10 if (! extension & &! extension2 & &! extension3 & &! extension4) {console.log ('upload template can only be xls, Xlsx, doc, docx format!)} if (! isLt2M) {console.log ('upload template size cannot exceed 10MB template')} return extension | | extension2 | | extension3 | | extension4 & & isLt2M}} "vue how to use Element el-upload components" ends here Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.