我有一个图片上传部分，我需要上传图片。但是当我保存时，我收到错误generic。任何人都可以帮我解决这个问题。
HTML：
<label >Image</label>
<div >
<input type="file" name="file" id="file" class="inputfile" (change)="readUrlAdd($event)" style="display:none;"/> <label for="file" >Add Image</label>
</div>
TS：
readUrlAdd(event: any) {
var files = event.srcElement.files;
var filename = new Date().getTime() + '.' + files[0].name.split(".")[1];
var imgFile = new File([files[0]], filename, { type: files[0].type });
var file_data = imgFile;
this.ApiService
.uploadImage(file_data)
.subscribe(
image => {
console.log(image);
var fileName = image.result.files.file[0].providerResponse.location;
console.log(fileName);
this.tutorials = fileName;
}, error => {
console.log(error);
})
}
API：
uploadImage (files) {
let token = JSON.parse(localStorage.getItem('token'));
var fd = new FormData();
fd.append('file', files);
return this.http.post(urlBase + '/tutorials/tutorial?token=' + token,fd)
.map(this.extractData)
.catch(this.handleError);
}
答案 0 :(得分：0)
您需要使用file uploader上传文件。安装使用以下命令。找到demo
npm i ng2-file-upload --save
答案 1 :(得分：0)
event.srcElement不适用于所有浏览器，请尝试以下
const files = event.target.files || event.srcElement.files;
const imgFile = files[0];
答案 2 :(得分：0)
您应该使用function getName(key)
{
key = document.getElementsByName(key)[0];
return key;
}
function getId(key)
{
key = document.getElementById(key);
return key;
}
function message(id, message, color = 'black')
{
getId(id).style.color = color;
getId(id).innerHTML = message;
}
function loadImage(handler)
{
if(handler.files && handler.files[0])
{
var reader = new FileReader();
reader.onload = function(e)
{
getId('productImagepreview').src = e.target.result;
}
reader.readAsDataURL(handler.files[0]);
}
}
function xhrCreateProduct()
{
var url = getId('formcProduct').getAttribute('action');
var image = getName('prodimage');
var name = getName('prodname');
var supplier = getName('prodsupplier');
var quantity = getName('prodquant');
var price = getName('prodprice');
var date = getName('proddate');
var imagevalue = image.value.trim();
var namevalue = name.value.trim();
var suppliervalue = supplier.value.trim();
var quantityvalue = quantity.value.trim();
var pricevalue = price.value.trim();
var datevalue = date.value.trim();
var valid_image = imagevalue.substring(imagevalue.lastIndexOf('.')+1).toLowerCase();
if(imagevalue == null || imagevalue == '')
{
message('msg_pimage', '* Provide product image', 'red');
image.focus();
return false;
}
else
{
message('msg_pimage', '');
}
if(valid_image != 'jpg' && valid_image != 'png' && valid_image != 'gif')
{
message('msg_pimage', '* File is not an image type', 'red');
image.focus();
return false;
}
else
{
message('msg_pimage', '');
}
if(namevalue == null || namevalue == '')
{
message('msg_pname', '* Provide product name', 'red');
name.focus();
return false;
}
else
{
message('msg_pname', '');
}
if(suppliervalue == null || suppliervalue == '')
{
message('msg_psupplier', '* Provide product supplier', 'red');
supplier.focus();
return false;
}
else
{
message('msg_psupplier', '');
}
if(quantityvalue == null || quantityvalue == '')
{
message('msg_pquant', '* Provide product quantity', 'red');
quantity.focus();
return false;
}
else
{
message('msg_pquant', '');
}
if(pricevalue == null || pricevalue == '')
{
message('msg_price', '* Provide product price', 'red');
price.focus();
return false;
}
else
{
message('msg_price', '');
}
if(datevalue == null || datevalue == '')
{
message('msg_pdate', '* Provide the date product come', 'red');
date.focus();
return false;
}
else
{
message('msg_pdate', '');
}
var xhr = null;
if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else
{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
var sendData = new FormData();
sendData.append('pimage', image.files[0], imagevalue);
sendData.append('pname', namevalue);
sendData.append('psupplier', suppliervalue);
sendData.append('pquant', quantityvalue);
sendData.append('pprice', pricevalue);
sendData.append('pdate', datevalue);
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(sendData);
xhr.onreadystatechange = function()
{
var OK = 4;
var DONE = 200;
if(xhr.readyState == OK && xhr.status == DONE)
{
//var response = JSON.parse(xhr.responseText);
document.write(xhr.responseText);
}
}
}
<form id="formcProduct" action="<?= URL; ?>product/create" method="post" enctype="multipart/form-data" onsubmit="return false;">
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<img id="productImagepreview" class="form-control customcss_image_size" src="<?= Setting::imageLocation('public/product_image/no_photo_1x.jpg'); ?>" />
<label for="exampleInputImage">Select an image</label>
<input class="form-control" id="exampleInputImage" name="prodimage" type="file" onchange="loadImage(this);" accept="image/*">
<span id="msg_pimage"></span>
</div>
<div class="col-md-6">
<label for="exampleInputPname">Product Name</label>
<input class="form-control" id="exampleInputPname" name="prodname" type="text" aria-describedby="nameHelp" placeholder="Enter Product name">
<span id="msg_pname"></span><br/>
<label for="exampleInputSupplier">Select Supplier</label>
<select class="form-control" id="exampleInputSupplier" name="prodsupplier">
<?php
if(sizeof($this->productSupplier) > 0)
{
foreach($this->productSupplier as $ps)
{
echo '<option value="'.$ps['col_id'].'">'.$ps['col_supplier_name'].'</option>';
}
}
?>
</select>
<span id="msg_psupplier"></span><br/>
<label for="exampleInputQuantity">Quantity</label>
<input class="form-control" id="exampleInputQuantity" name="prodquant" type="number" aria-describedby="nameHelp" placeholder="0">
<span id="msg_pquant"></span><br/>
<label for="exampleInputPrice">Price</label>
<input class="form-control" id="exampleInputPrice" name="prodprice" type="text" aria-describedby="nameHelp" placeholder="₱ 0.00">
<span id="msg_price"></span><br/>
<label for="exampleInputLastName">Date</label>
<input class="form-control" id="exampleInputLastName" name="proddate" type="date">
<span id="msg_pdate"></span>
</div>
</div>
</div>
<input type="submit" class="btn btn-primary btn-block" value="Create Product" onclick="xhrCreateProduct();" />
</form>
var_dump($_POST);
var_dump($_FILES);