JavaScript — отображение ранее загруженных файлов или изображений

Показать ранее загруженные файлы или изображения

У меня есть две таблицы данных, и я использую Django на заднем конце и Vuejs на переднем конце. (1) Продукты, хранит информацию о продукте и одно изображение. (2) Products_Images, хранит несколько изображений по отношению к продукту.

Приведенный ниже код вызывается из {amp}lt;Product List{amp}gt; при редактировании сведений о продукте, включая добавление изображений или удаление изображений.

Моя проблема заключается в том, что в режиме редактирования мне нужно отображать ранее выбранный вместо (не выбранных файлов)

 {amp}lt;!-- Edit a Product (Start) --{amp}gt; {amp}lt;template id="product-edit"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;h2{amp}gt;Product (Edit){amp}lt;/h2{amp}gt; {amp}lt;form method="post" enctype="multipart/form-data" ref="itemMaster"{amp}gt; {amp}lt;!-- Display Product Name --{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input class="form-control" id="edit-name" v-model="product.itemfullhd" required/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- Upload Single Image --{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;!-- ### MY PROBLEM HERE ### --{amp}gt; {amp}lt;label for="edit-imagemain"{amp}gt;Main Image {amp}lt;/label{amp}gt; {amp}lt;input type="file" id="edit-imagemain" v-model="product.Image_file" @change="onFileChanged" required/{amp}gt; {amp}lt;img class="cart-thumbnail" v-bind:src="'/media/'   product.image_file" alt="image"/{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- Upload Multiple Images --{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;!-- ### MY PROBLEM ALSO HERE ### --{amp}gt; {amp}lt;label for="files"{amp}gt;Xtra Images{amp}lt;/label{amp}gt; {amp}lt;input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()"/{amp}gt; {amp}lt;div{amp}gt; {amp}lt;!-- Display the Multiple Images --{amp}gt; {amp}lt;table class="table table-striped "{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Xtra Image File/s{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Image{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Delete{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;tr v-for="imagerec in products_images" and v-if="( imagerec.itemfullhd == product.itemfullhd )" style="clear: both;"{amp}gt; {amp}lt;td{amp}gt;/media/{{imagerec.images_multiple}}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;img class="cart-thumbnail" v-bind:src="'/media/'   imagerec.images_multiple" alt="image"/{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input type="checkbox" :value="imagerec.mark" number{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button type="submit" class="btn btn-primary" @click.prevent="updateProduct"{amp}gt;Save{amp}lt;/button{amp}gt; {amp}lt;a class="btn btn-dark"{amp}gt;{amp}lt;router-link to="/product-list"{amp}gt;Cancel{amp}lt;/router-link{amp}gt;{amp}lt;/a{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;!-- Edit a Product (Done) --{amp}gt; 
 {amp}lt;script{amp}gt; var store = new Vuex.Store({ state: { products: [], products_images: [], }, mutations: { loadProducts: (state, {products, products_images}) ={amp}gt; { state.products = products; state.products_images = products_images; }, }, actions: { retrieveProducts: ({ commit }) ={amp}gt; { axios.get('/biggmount_home/Show-Items-Axios') .then(response ={amp}gt; { products = response.data.md_items_qs2; // send by views.py products_images = response.data.md_items_images_qs2; // send by views.py commit('loadProducts', {products, products_images}) }) .catch(error ={amp}gt; { alert("ERROR") commit('ERRORED', error) }) // AXIOS method - End }, }, }) function findProduct (productId) { return products[findProductKey(productId)]; }; function findProductKey (productId) { for (var key = 0; key {amp}lt; products.length; key  ) { if (products[key].id == productId) { return key; } } }; var ProductEdit = Vue.extend({ template: '#product-edit', data: function () { return { product: findProduct(this.$route.params.product_id), selectedImage: null, // image_file: product.image_file, // files: products_images.images_multiple, selected: [], }; }, methods: { onFileChanged (event) { this.selectedImage = event.target.files[0] this.product.image_file = this.selectedImage.name }, /* Handles a change on the file upload */ handleFilesUpload(){ this.files = this.$refs.files.files; this.image_file = this.$refs.files.files; }, updateProduct: function () { let product = this.product; const formData = new FormData() if (this.selectedImage != null) { formData.append('Item Image', this.selectedImage, this.selectedImage.name) } else { formData.append('Item Image', []) } if (this.files != null) { /* Iterate over any file sent over appending the files to the form data. */ for( var i = 0; i {amp}lt; this.files.length; i   ){ let file = this.files[i]; formData.append('Item Images', file); } } else { formData.append('Item Images', []) } formData.append('Item Id', product.id) formData.append('Item Name', product.itemfullhd) formData.append('Item Imagefl', product.imagefl) axios.post('/biggmount_home/Post-Items-Axios', formData) products[findProductKey(product.id)] = { id: product.id, itemfullhd: product.itemfullhd, imagefl: product.imagefl, image_file: '/biggmount_shop/images/'   this.selectedImage.name, std_rte: product.std_rte, }; router.push('/product-list'); }, } }); const app = new Vue({ router, store, methods: { ...Vuex.mapMutations([ 'loadProducts', ]), ...Vuex.mapActions([ 'retrieveProducts' ]), }, computed: { ...Vuex.mapState([ 'products', 'products_images', ]), }, mounted() { this.retrieveProducts() }, }).$mount('#app') {amp}lt;/script{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector