Implements Image Upload and Image Display Based on vue and bootstrap,

Implements Image Upload and Image Display Based on vue and bootstrap,

As follows:

Html

............<-- key=idPicUrl --> <div class="col-sm-7" >     </div> <form id="fileForm" enctype="multipart/form-data" class="form-horizontal " >  <div class="col-sm-5 " style="margin:0 25%;padding: 0">     <input class="form-control" type="file" name="file" @change="handleFileChange" ref="inputer" >    </div></form>

Vue

 data: {   queryFirmInfo：{   idPicUrl：""   ......  } }

// Select change image handleFileChange (e) {var vm = this; let file = e.tar get. files [0]; let supportedTypes = ['image/jpg ', 'image/jpeg', 'image/png ']; if (file & supportedTypes. indexOf (file. type)> = 0) {baseFileAjax (new FormData ($ ("# fileForm") [0]), function (result) {if (result. ret = 0) {// After the image is submitted, // upload the image to the background to obtain the path of the background image. Vm. queryFirmInfo ["idPicUrl"] = result. url; $ ("# dForm "). formValidation ('revalidatefield ', "idPicUrl");} else {layer. msg ("failed to modify image! ")} Else {layer. alert ('file format: jpg, jpeg, and png ');}},

/*** @ Method: form submission file * @ param url: Request Path * @ param data: request data (new FormData ($ ("# imgForm ") [0]) * @ param method: callback method */function baseFileAjax (data, method) {$. ajax ({url: '/dspark-firm/firmMember/uploadFile. yt', type: 'post', data: data, async: false, cache: false, contentType: false, processData: false, success: method, error: function (returndata) {alert ("Connection error ");}});}

The above section describes how to use vue + bootstrap to display uploaded images. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!